简述 React 组件生命周期

qpal 发布于2019-08-23 11:52 / 2849人阅读

摘要：这个阶段只有一个方法，该方法在整个生命周期内调用且仅调用一次。在这里进行一些相关的销毁操作，比如撤销定时器，事件监听等等。

详解 React 生命周期

整个 React 生命周期有3个阶段：创建、更新、卸载，每个阶段有对应的工作和方法，我们可以看下面这个经典的图研究一下：

第一阶段

这是虚拟 DOM 创建的阶段，会依次执行 5 个方法，这 5 个方法中除了 render 方法，其余四个方法在整个生命周期中只调用 1 次，而且一定会调用 1 次：

getDefaultProps()

这个方法在组件实例创建前，也就是构造函数执行前执行，获取父组件传来的参数，你可以在这里编辑参数并返回新的参数作为 props

getInitalState()

组件创建的一开始会调用这个方法初始化组件的 state

componentWillMount()

在组件 render 之前执行该方法，可用来修改 state。React 先调用父组件的这个函数，再调用子组件的这个函数

render()

开始组件渲染函数，返回一个只有一个根节点的虚拟 DOM。该函数中不能同步的修改组件的状态(state)。

componentDidMount()

在 render 渲染之后，通知组件已经加载完成。React 先调用子组件的这个函数，再调用父组件的这个函数。从这个函数开始，该组件就可以和其他框架交互了。比如设置计时器或者发起网络请求。

第二阶段

此时该组件已经进入了稳定运行阶段，这个阶段组件可以处理用户交互，或者接收事件更新界面。以下方法在整个生命周期中可以执行很多次，也可以一次也不执行。

componentWillReceiveProps()

当父容器中对应的参数改变将会调用子组件的该函数。新的 props 将会作为参数传递进来，老的 props 可以根据 this.props 来获取。我们可以在该函数中对state作一些处理。并且在该函数中更新 state 不会发生二次渲染

shouldComponentUpdate()

该函数传递过来两个参数，新的 state 和新的 props。state 和 props 的改变都会调到该函数。该函数主要对传递过来的 nextProps 和 nextState 作判断。如果返回 true 则重新渲染(默认都是返回 true)，如果返回 false 则不重新渲染。在某些特定条件下，我们可以根据传递过来的 props 和 state 来选择更新或者不更新，从而提高效率。

componentWillUpdate()

与 componentWillMount 方法类似，在 render 渲染之前被调用。组件上会接收到新的 props 或者 state。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。

componentDidUpdate()

与 componentDidMount 方法类似，在 render 渲染之后被调用，真实 DOM 生成之后调用该函数。传递过来的参数是之前的 props 和 state。

第三阶段

这就是消亡的阶段，主要进行内存的清理和释放的工作。这个阶段只有一个方法，该方法在整个生命周期内调用且仅调用一次。

componentWillUnmount()

当组件要被从界面上移除的时候，就会调用 componentWillUnmount。在这里进行一些相关的销毁操作，比如撤销定时器，事件监听等等。

触发 render 的几种情况

这里我们仅考虑 shouldComponentUpdate 没有被修改，始终返回的是 true

首次渲染，即 Initial Render

调用this.setState (不是每次调用 setState 都会触发，react 会优化，比如 antd 的 input 组件)

父组件发生更新，通常是修改的子组件的 props

如果父组件触发了 render, 子组件当然也会相应触发 render

调用 this.forceUpdate()

一个简单的示例

import React from "react";
import ReactDOM from "react-dom";
import style from "./font.css";
import "./index.less";

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      willRender: true,
      prop: 1
    };
  }

  render(){
    return (
      
        
        {
          this.state.willRender &&
          
        }
        
      
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: 0
    };
  }

 getDefaultProps(){
   console.log("getDefaultProps");
 }

  getInitalState(){
    console.log("getInitalState");
  }

  componentWillMount(){
    console.log("componentWillMount");
  }

  componentDidMount(){
    console.log("componentDidMount");
  }

  componentWillReceiveProps(){
    console.log("componentWillReceiveProps");
  }

  shouldComponentUpdate(){
    console.log("shouldComponentUpdate");
    return true;
  }

  componentWillUpdate(){
    console.log("componentWillUpdate");
  }

  componentDidUpdate(){
    console.log("componentDidUpdate");
  }

  componentWillUnmount(){
    console.log("componentWillUnmount");
  }

  render() {
    console.log("render")

    return (
      
        
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

混合云 idc机房托管生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97603.html

前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Tychio 2019-08-05 16:51 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Carson 2019-07-31 10:21 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

muzhuyu 2019-07-01 12:43 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

li21 2019-08-23 17:11 评论0 收藏0