图示
中文教程
类组件有生命周期，函数式组件没有声明周期（所以函数式组件的性能更高）

完整图示

image.png

常用图示

image.png

React组件的生命周期可以分为3种状态。

• 挂载时

• 更新时

• 卸载时

挂载时

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下

• constructor()
• static getDerivedStateFromProps() 了解即可
• render()
• componentDidMount()

constructor

1. 通过给 this.state 赋值对象来初始化内部 state。(不要使用this.setState()来初始化数据)

this.state={key:val};

2. 为事件处理函数绑定实例

this.handleClick=this.handleClick.bind(this);

render

render函数负责将模板渲染到页面，一般来说说，当props和state发生改变时，都会重新出发render，需要注意的是，不要在render函数中 修改props和state，否则会导致死循环！！

componentDidMount

componentDidMount 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。一般用来在这里发送异步请求。

更新时

当组件的 props 或 state 发生变化时会触发更新，会按顺序调用以下的生命周期事件。

• static getDerivedStateFromProps() 了解即可
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate() 了解即可
• componentDidUpdate()

shouldComponentUpdate

当props和state发生改变时触发，返回true 则表示允许执行 render ，返回 false这表示 不允许运行render
接收两个参数，nextState和nextProps，表示修改后的 state和props值。一般用在提高性能使用。如：
当state中的某个值为偶数才触发render，为奇数则不触发。

renders

同上述说明

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法
当组件更新后，可以在此处对 DOM 进行操作。 如 判断是否触底了，再进行其他操作。
会接收3个参数

• prevProps 修改前的props对象
• prevState 修改前的state对象
• snapshot 了解

卸载时

componentWillUnmount

在组件卸载及销毁之前直接调用，在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求等。
也不要在该事件中 执行 setState操作，无效。

不用常用的生命周期事件
React路由
闭包，原型链，继承，AJAX请求步骤等javaScript基础