标签：返回 生命周期 钩子 React state props 搞懂 接收

阅读指南

本文采用总分总的结构，首先给出React生命周期流程图，让大家知道我们的研究目标是什么，第二部分则分别对React生命周期中的重点难点的生命钩子函数进行介绍。第三部分给出React生命周期的总结。

React生命周期流程图

1. getDerivedStateFromProps(props, state)

官方解释：调用这个钩子函数，会使得state在任何时候的状态值都取决于props.

这个函数是静态的，所以前面要加static.

返回的是什么？

返回的应该是状态对象（或者null）,总之返回的应该是一个对象，如果你什么都不返回，会出现警告。这个返回的对象就是render要渲染的state

接收的是什么？

接收两个参数，一个是最新的props，一个是最新的state.

codeSandBox在线演示

---

2. shouldComponentUpdate(nextProps, nextState)

接收的是什么？

接收两个参数，一个是最新的但是还未render的props，另一个则是最新的但是还未render的state.

返回的是什么？

返回的是布尔值，返回true则让当前组件进行更新，返回false则让当前组件不更新。

codeSandBox在线演示

---

3. componentDidMount

接受的是什么？

这个生命周期钩子函数是在挂载的最后阶段调用，并未接收参数。

可以在这个钩子函数中处理组件挂载后的一些操作。

4. getSnapshotBeforeUpdate(preProps,preState)

接收的是什么？

接收两个参数，一个是之前的props，一个是之前的state.

返回的是什么？

在这个生命周期钩子函数中，记录了更新DOM之前的一些HTML属性，返回的值，会被componentDidUpdate的第三个参数接收。

codeSandBox在线演示（新闻滚动条案例）

5. componentDidUpdate(prevProps, prevState, snapshot)

接收的是什么？

接收的是之前的props和之前的state，这个state是滞后与DOM的，同时第三个参数是接收的getSnapshotBeforeUpdate传来的参数。

返回的是什么？

并不会返回什么，但是可以在此处进行更新后的对比，并对DOM进行操作，或者发起网络请求。

6. componentWillUnmount()

该生命周期函数会在组件卸载之前调用，在这个方法中可以进行清除定时器等操作。在这个生命周期钩子函数中不应调用setState，因为如果这样组件将永远不会重新渲染。

7. forceUpdate(callback)

该生命周期函数不用更改state或props也能对组件进行更新，调用render，且不用通过shouldComponentUpdate这个钩子。

codeSandBox在线演示

总结生命周期

React生命周期最关键的是要记住每一个生命周期钩子函数接收的是什么？返回的是什么？在什么阶段调用，这是核心也是关键，最后一定要熟记流程图！

标签：返回,生命周期,钩子,React,state,props,搞懂,接收
来源： https://blog.csdn.net/sinat_41696687/article/details/118859042

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。