生命周期函数

挂载阶段

这个阶段执行的生命周期函数调用：

1. constructor
2. getDerivedStateFromProps
3. UNSAFE_componentWillMount/ componentWillMount
4. render
5. componentDidMount

constructor

何时调用

组件的构造函数，第一个被执行
没有显示定义，也会自动添加。
如果显示定义了构造函数，必须在构造函数的第一行执行super（props），否则无法在构造函数中拿到this对象。

能做什么

只做两件事。

• 初始化state对象
• 为事件处理函数绑定实例

注意事项

1. 在constructor函数不要调用setState方法。可以直接this.state对state赋值
2. 要避免在构造函数中引入任何副作用或者订阅，如需这种操作，请放在componentDidMount。
3. 避免将props的值复制给state中。（有疑惑？） 直接使用props的值，不需要再进行复制。

getDerivedStateFromProps(nextProps,preState)

何时调用

该函数会在挂载时，或者接受到新的props，或者调用了setState和forceUpdate时调用。
这个方法是为了取代之前的：

• UNSAFE_componentWillReceiveProps/componentWillReceiveProps
• componentWillUpdate/UNSAFE_componentWillUpdate
• UNSAFE_componentWillMount/ componentWillMount

当我们接收到新的属性想去修改我们state，可以使用getDerviedStateFromProps

语法

static getDerivedStateFromProps(nextProps,preState)
复制代码

参数/返回值

这个函数有两个参数，prop和state,分别指接受到的新参数，和当前的state对象。
这个函数会返回一个对象来更新当前的state对象，如果不需要更新时，可以返回null。

注意

因为是静态方法，因此不能使用this关键字

UNSAFE_componentWillMount/ componentWillMount

在16版本，这两个方法并存，在17版本之后，componentWillMount会被废弃。目的是为了向下兼容，新的应用请使用getDerivedStateFromProps。

何时调用

在render方法之前调用

注意

可以使用setState方法，但是不会触发额外的渲染，因为在render方法之前执行。

render

React中最核心的方法，一个组件中必须要有这个方法。

返回值

返回的类型有以下几种类型：

• 原生的DOM
• Fragment片段
• React组件
• 字符串或数组 被渲染称text节点
• Boolean和null，不会渲染任何东西

能做什么

render是纯函数，里面只做一件事，就是返回渲染的东西，不应该包含其他的业务逻辑，如请求数据等。

componentDidMount

何时调用

组件装载之后。

能做什么

此时可以获取到DOM节点，并操作
服务器请求，订阅

注意

在componentDidMount中调用setState会触发一次额外渲染，多调用了一次render函数，但是用户对此没有感知（疑问？），因为它是在浏览器刷新屏幕之前执行的，但是在开发中避免它， 因为会带来一定的性能问题。
应该在constructor中初始化state对象。

更新阶段

更新阶段 ，当组件的props改变，或者组件内部调用了setState或者forceUpdate。

1. UNSAFE_componentWillReceiveProps/componentWillReceiveProps
2. getDerivedStateFromProps
3. shouldComponentUpdate
4. componentWillUpdate/UNSAFE_componentWillUpdate
5. render
6. getSnapshotBeforeUpdate
7. componentDidUpdate

UNSAFE_componentWillReceiveProps/componentWillReceiveProps

16版本这两个方法并存，在17版本componentWillReceiveProps将会被废弃，目的是为了向下兼容，新应用请用getDerivedStateFromProps代替他们。

何时调用

组件的props改变，或者组件内部调用了setState或者forceUpdate

注意

1. 当父组件重新渲染的时候，会导致我们的子组件调用~~UNSAFE_componentWillReceiveProps，~~即使属性和之前的属性一样，所以需要我们在这个方法中去判断，如果前后属性不一致才去调用setState。
2. 装载阶段这两个函数不会被触发，在组件内部调用了setState和forceUpdate也不会触发这两个函数。

getDerivedStateFromProps

注意：
在更新阶段，无论接收到新的属性，调用了setState或者forceUpdate，这个方法都会被调用。

shouldComponentUpdate（nextProps，nextState）

参数

接收两个参数，nextProps和nextState，表示新的属性和变化之后的state

返回值

返回一个布尔值，默认是返回true，也就是接收到新的属性或者调用setState都会触发重新的渲染。

注意

这会带来一定的性能问题 ，所以需要将this.props和nextProps以及this.state和nextState进行比较来决定是否返回false来减少重新渲染。
但是官方提倡使用PureComponent来减少重新渲染的次数而不是手动编写shouldComponentUpdate代码。
在未来的版本里，shouldComponentUpdate返回false，仍然可能导致组件的重新渲染。

componentWillUpdate/UNSAFE_componentWillUpdate

在16版本这两个方法将并存，但是在17版本将废弃componentWillUpdate，目的是为了向下兼容。

注意

在这个方法里，你不能调用setState,因为能走到这个方法，说明shouldComponentupdate返回true，此时下一个state的状态已经被确定。
也不能请求一些网络数据。

render

getSnapshotBeforeUpdate（preProps，preState）

用来替代 componentWillUpdate,以及

何时调用

这个方法在render之后，ComponentDidUpdate之前调用。

参数

preProps，preState

返回值

这个函数有一个返回值，会作为第三个参数传给componentDidUpdate。
如果不想要返回值，返回null，不写的话会有警告。

注意

这个方法 一定要和componentDidUpdate一起使用，否则控制台也会有警告。

componentDidUpdate（preProps，preState，snapshot）

何时调用

该方法在getSnapshotBeforeUpdate方法之后被调用。

参数

有三个参数
preProps，preState，snapshot

能做什么

这个函数内可以操作DOM，和发起服务器请求，还可以setState，但是一定要注意用if语句控制，否则会导致无线循环。

卸载阶段

componentWillUnmount

何时调用

当我们组件被卸载或者销毁之前就会调用

能做什么

可以在这个函数内去清除一些定时器，取消网络请求，清理无效的DOM元素等。

注意

不要在这个函数内去调用setState，因为组件不会重新渲染了。

参考链接

1. juejin.im/post/5b6f18…
2. React官方文档