react学习之路之生命周期
创建时（挂载阶段）
- List item
- 执行顺序：constructor()、render() 、componentDidMount()
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建时最先执行 | 初始化state、为事件处理程序绑定this |
| render | 每次组件渲染都会触发 | 渲染UI，不能调用setState() |
| componentDidMount | 组件挂在（完成DOM渲染）后 | 发送网络请求、DOM操作 |
- 注意：setState() 的调用会触发render(),从而导致递归
更新时（更新阶段）
- 执行时机：setState() 、forceUpdate() 、组件接收到新的props
- 说明：以上三者任意一种变化，组件就会重新渲染
- 执行顺序：render()、componentDidUpdate()
钩子函数 触发时机 作用 render 每次组件选人都会触发 渲染UI（与挂载阶段是同一个render） componentDidUpdate（prevProps） 组件更新（完成DOM渲染）后 发送网络请求、DOM操作、注意：如果要setState()必须放在if条件中,一般判断条件为，更新前后的props
卸载时（卸载阶段）
- 说明：组件从页面中消失
钩子函数 触发时机 作用 componentWillUnmount 组件卸载 执行清理工作（比如清理定时器）
其他生命周期钩子
| 钩子函数 | 作用 |
|---|---|
| shouldComponentUpdate | 问题：有时候我们调用了setState() 但是没有改变里面state中的值或者props中的值没有发生变化都会导致UI渲染.解决方法：shouldComponentUpdate (nextProps, nextState), 中有两个参数，可以对比下次的state中的值和当前state中的值是否一样（nextState.number === this.state.number），来决定是否执行render钩子函数（return true 渲染、return false 不渲染） |
以上是 react学习之路之生命周期 的全部内容， 来源链接： utcz.com/z/381453.html
