react类组件常用生命周期理

秒速五厘米 2022-09-04 05:48 102阅读 0赞

## react类组件常用生命周期理 ##

常用的生命周期图示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]

挂载阶段：constructor => render => componentDidMount => 结束  
更新阶段： render => componentDidUpdate => 结束  
卸载阶段：componentWillUnmount => 结束

**constructor**  
构造函数用于以下两种情况：  
通过给 this.state 赋值对象来初始化内部 state。this.state = \{prop: val, …\}  
为事件处理函数绑定实例 this.handler = this.handler.bind(this);  
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。  
super(props)应写在该方法的最前面;否则，this.props在构造函数中可能会出现未定义的bug

**render**  
render()方法是class组件中唯一必须实现的方法。  
返回以下类型之一：React元素, 数组或fragments, Portals, 字符串或数值类型, 布尔类型或null  
render()函数应该为纯函数

**componentDidMount()**  
会在组件挂载后(插入DOM树中)立即调用。

进行依赖于DOM节点的初始化，如需通过网络请求获取数据，此处是实例化请求的好地方。  
添加订阅的地方。如果添加了订阅。不要忘记在 componentWillUnmount() 里取消订阅  
可以在 componentDidMount()里可以直接调用setState()。将触发额外渲染，会导致性能问题。

**componentDidUpdate()**  
componentDidUpdate(prevProps, prevState, snapshot) 有三个默认参数  
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。  
可以在此处对 DOM 进行操作。可以选择在此处进行网络请求。  
可以在 componentDidUpdate()中直接调用 setState()，但请注意它必须被包裹在一个条件语件里，否则会导致死循环。导致额外的重新渲染，会影响组件性能。  
如果组件实现了getSnapshotBeforeUpdate(), 则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。

**componentWillUnmount()**  
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。  
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]: /images/20220829/596e0296451f402397e3aee3291115eb.png