React官方文档阅读笔记--核心概念_react cross-site warn-CSDN博客

本文介绍了React的核心概念，包括JSX的安全性，元素渲染的单根DOM节点原则，组件与props的使用，以及组件状态（state）和生命周期的详细过程。在组件生命周期中，讲解了从挂载阶段的constructor、getDerivedStateFromProps、render到componentDidMount，再到更新阶段的shouldComponentUpdate等关键方法的作用和调用顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. JSX
2. 元素渲染
3. 组件 & props
4. state & 生命周期

1. JSX

jsx 可以防止注入攻击
- React DOM 在渲染所有输入内容的时候，默认会进行转译，可以有效的防止 XSS (cross-site-scriping) 跨站脚本攻击
Babel会把JSX转译成一个名为React.createElement()函数调用

2. 元素渲染

在项目的index.html 文件中，会有一个div

    <div id="root"></div>

仅用React 构建的应用通常只有单一的根DOM节点

3. 组件 & props

当 React 元素为用户自定义组件时，它会将jSX 所接受的属性以及子组件Children转换为单个对象 props 传递给组件。
自定义组件必须以大写字母开头
- 以小写字母开头的元素代表一个 HTML 内置组件, 会生成相应的字符串 'div' 或 'span' 传递给 React.createElement作为参数.
- 大写字母开头的元素,如 <Foo /> 则会编译为 React.createElement(Foo)
组件绝不能修改自身的props
纯函数：不会修改本函数的参数（入参），所以多次调用相同的入参始终返回相同的结果

4. state & 生命周期

React.Component

React的Class组件需要继承 React.Component。

强烈建议不要创建自己的组件基类，代码重用的主要方式是组合，不是继承

组件的生命周期

把现有的所有生命周期函数全部列出来，看看执行结果先

	constructor(props) {
        super(props)
        this.state = {
            count: 0,
            name: '大笨钟'
        };
        console.log('constructor');
    }

    static getDerivedStateFromProps(props, state) {
        console.log('static getDerivedStateFromProps', props, state);
    }

    componentDidMount() {
        console.log('componentDidMount', this.state.count);
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate', this.state.count, nextProps, nextState);
        return true;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate', this.state.count, prevProps, prevState);
    }

    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate', this.state.count, prevProps, prevState);
    }

    static getDerivedStateFromError(error) {
        console.log('getDerivedStateFromError', error);
    }

    componentDidCatch(error, errorInfo) {
        console.log('componentDidCatch', error, errorInfo);
    }
	handleAdd() {
        this.setState({count: this.state.count + 1})
    }

    render() {
        console.log('render', this.state.count);
        return (
            <div>
                你好，我的{this.state.name}{this.state.count}
                <button onClick={() => this.handleAdd()}>点击新增Count</button>
            </div>
        );
    }

首次进入页面加载时，输入结果如下：
在这里插入图片描述
清晰可见，当组件实例被创建并插入DOM时，其生命周期调用顺序就是上面四个输出的顺序。

这个时候点击新增count，会更新state中的count的值，就是组件更新，这个时候再看看打印结果
在这里插入图片描述
以上就是组件更新时生命周期的调用顺序。
此时，配合下图食用风味更佳。

挂载

constructor(props)

如果不进行初始化state或方法绑定，就不需要实现构造函数。

*static getDerivedStateFromProps(props, state)（不常用）

这个方法主要是为了让你可以基于props来更新state。将props与state做对比，当不同时，返回一个对象包含需要更新的state的值。
在之前的react版本中，是用生命周期函数componentWillReceiveProps来响应props变化的，但这个函数在16及以后的版本已经逐步废弃，尽量不要使用。

在render之前调用，并在初始挂载和后续更新时都会被调用,可以返回一个对象来更新state。返回null 表示无需更新state。
此方法无权访问组件实例，即不能用this访问组件中的方法

render()

render()方法时class组件中唯一必须实现的方法

render() 方法可以返回以下类型之一：

React元素。
数组或Fragments。可以返回多个元素，用Fragment元素包裹，不会在DOM添加额外节点。类似于<></>。Fragment只可以添加key属性，在遍历元素时添加使用。可以防止react警告。
Portals。可以渲染子节点到不同的DOM子树中。
字符串或数值类型。会被渲染为文本节点
布尔类型或null。什么都不渲染。