React之新生命周期的思考

React新生命周期图

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

render()方法

render()

render()方法在类组件中必须被调用

它会检查props和state的变化并返回以下类型之一

1. React元素

2. 数组

3. 字符串

4. 布尔类型或者null

需要注意的是，我们应该保证render()里的内容是一个纯函数，这样在不进行修改state或者dom操作的情况下，render()每次操作都能返回同样的结果

Constructor()方法

Constructor(props)

这是一个构造函数方法，在React组件进行挂载之前会调用它的构造函数

但是我们需要在其他语句之前调用super(props)

此方法用来将调用当前类组件的父组件的属性传入类组件

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始 state

同样的我们需要注意不要在构造函数中引入任何副作用

ComponentDidMount()方法

componentDidMount()

ComponentDidMount会在组件挂载后立即调用

依赖于DOM节点的初始化应该直接放在这里

例如网络请求数据，通过id或者classname获取dom节点，进行订阅或者取消订阅

ComponentDidUpdate()方法

componentDidUpdate(prevProps, prevState, snapshot)

该方法会在state或者props或者监听到事件后（也就是更新后）被调用

在组件更新后，可以在此进行dom操作

componentWillUnmount()方法

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。