深入浅出React+Redux（二：React 组件的生命周期）

最新推荐文章于 2024-09-06 09:34:57 发布

Justin0223

最新推荐文章于 2024-09-06 09:34:57 发布

阅读量2k

点赞数

分类专栏： React 文章标签： React React生命周期

本文链接：https://blog.csdn.net/u010377383/article/details/79069524

版权

本文深入探讨React组件的生命周期，包括装载（Mount）、更新（Update）和卸载（Unmount）过程，详细解析各阶段的关键函数，如constructor、componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate等，并举例说明如何在不同阶段使用这些函数以优化性能。同时，文章还讨论了React组件向外传递数据和实例的方法，以及React组件state和prop的局限，引发对状态管理的思考。

摘要由CSDN通过智能技术生成

前言

如同人有生老病死，自然界有日月更替，每个组件在网页中也会被创建、更新和删除，如同有生命的机体一样。

React 严格定义了组件的生命周期，生命周期可能会经历如下三个过程：

装载过程（ Mount），也就是把组件第一次在 DOM 树中渲染的过程；
更新过程（ Update ），当组件被重新渲染的过程；
卸载过程（ Unmount），组件从 DOM 中删除的过程。

三种不同的过程， React 库会依次调用组件的一些成员函数，这些函数称为生命周期函数。

（一）装载过程

当组件第一次被渲染的时候，依次调用的函数

constructor：构造函数，要创造一个组件类的实例。
- 用于继承父类的props
- 初始化state
- 绑定成员函数的this
getlnitialState：函数的返回值会用来初始化组件的 this.state ，在一个组件声明周期只调用一次,不建议放置多次调用代码。但是，这个方法只有用 React.createClass 方法创造的组件类才会发生作用（PS：现在已经被遗弃，ES声明在构造函数中）。
getDefaultProps：函数的返回值可以作为 props 的初始值。但是，这个函数只在 React.createClass 方法创造的组件类才会用到（PS：现在已经被遗弃，ES声明使用组件的 defaultProps属性）。
componentWillMount：将要装载时。即使调用 this.setState修改状态也不会引发重新绘制。换句话说，所有可以在这个 componentWillMount 中做的事情，都可以提前到 constructor 中间去做，可以认为这个函数存在的主要目的就是为了和 componentDidMount 对称。
render：返回渲染内容。没有也必须返回null或者false，告诉React不需要渲染DOM元素。
componentDidMount：组件加载完成。render 函数被调用完之后，并非立即调用，是render函数返回的内容已经渲染到DOM树上。此时才触发此函数。

我们还是以 ControlPanel 为例，在 ControlPanel 中有三个 Counter 组件，我们稍微
修改 Counter 的代码，让装载过程中所有生命周期函数都用 console.log 输出函数名和caption 的值。

    constructor(props){
         ....
+        console.log(`enter constructor, ${
   this.props.caption}`);
     }

+    componentWillMount() {
+        console.log(`enter componentWillMount,${
   this.props.caption}`);
+    }


+    componentDidMount() {
+        console.log(`enter componentDidMount,${
   th