React 初探（七）- 生命周期

概述

React 有一些生命周期钩子，可以让开发者在适当的时候插入自己的代码。那 React 生命周期中有哪些钩子函数呢？

首先写一个简单的 demo

这四个状态便表示了一个 div 的整个生命周期，React 也不例外

上图便是创建一个组件的过程。React 生命周期 demo

不能在 mount 之前 setState，即不能在 constructor、componentWillMount 和 render 中 setState
不能在 componentWillUpdate 和 componentDidUpdate 中 setState，反复调用，栈溢出
可以在 componentDidMount 、 componentWillUnmount 和 componentWillReceiveProps 中 setState

shouldComponentUpdate(nextProps, nextState)

使用 shouldComponentUpdate 以让 React 知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重新渲染，在大部分情况下你应该依赖于默认行为。

当接收到新属性或状态时，shouldComponentUpdate 在渲染前被调用。默认为 true。该方法并不会在初始化渲染或当使用 forceUpdate() 时被调用。

若 shouldComponentUpdate() 返回 false，而后 componentWillUpdate、render() 和 componentDidUpdate 将不会被调用。

返回的参数 nextProps 和 nextState 是即将更新的数据，this.state 是旧的数据

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能帮我们避免不必要的更新

需要将 AJAX 请求放到 componentDidMount 函数中执行，主要原因如下：

在 constructor 函数中不能使用 setState
在 componentWillUnmount 中无法确保在执行 render 前已经获得了异步请求的数据，componentDIdMount 不存在这个问题
为了性能的需要，FIber 有了调度 render 执行顺序的能力，所以 componentWillMount 函数的执行变得不确定了
无法保证 AJAX 请求在组件的更新阶段里成功返回数据，有可能当我们进行 setState 处理的时候，组件已经被销毁了

shouldComponentUpdate + componentWillUpdate + render + componentDidUpdate

最后编辑于：2019.01.29 20:55:19

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。