React组件生命周期详解

learn_shifeng 发布于2019-08-22 17:31 / 961人阅读

摘要：组件生命周期构造方法是对类的默认方法，通过命令生成对象实例时自动调用该方法。该生命周期可以发起异步请求，并。后废弃该生命周期，可以在中完成设置渲染组件是一个组件必须定义的生命周期，用来渲染。该生命周期内可以进行。

React组件生命周期 constructor( ) 构造方法

constructor是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。当存在constructor的时候⚠️必须手动调用super方法。
在constructor中如果要访问this.props需要传入props，示例如下：

class MyClass extends React.component{
    constructor(props){
        super(props); // 声明constructor时必须调用super方法
        console.log(this.props); // 可以正常访问this.props
    }
}

constructor 常用来初始化state

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
    }
}

Class静态方法实例属性初始化state

class ReactCounter extends React.Component {
    state = {
      list: []
    };
}

具体文章可见Class-的静态方法

componentWillMount() 组件挂载之前

在组件挂载之前调用且全局只调用一次。如果在这个钩子里可以setState，render后可以看到更新后的state，不会触发重复渲染。该生命周期可以发起异步请求，并setState。（React v16.3后废弃该生命周期，可以在constructor中完成设置state）

render() 渲染组件

render是一个React组件必须定义的生命周期，用来渲染dom。⚠️不要在render里面修改state，会触发死循环导致栈溢出。render必须返回reactDom

render() {
    const {nodeResultData: {res} = {}} = this.props;
    if (isEmpty(res)) return noDataInfo;
    const nodeResult = this.getNodeResult(res);
    return (
        
            {nodeResult}
        
    );

componentDidMount() 组件挂载完成后

在组件挂载完成后调用，且全局只调用一次。可以在这里使用refs，获取真实dom元素。该钩子内也可以发起异步请求，并在异步请求中可以进行setState。

componentDidMount() {
    axios.get("/auth/getTemplate").then(res => {
        const {TemplateList = []} = res;
        this.setState({TemplateList});
    });
}

componentWillReceiveProps (nextProps ) props即将变化之前

props发生变化以及父组件重新渲染时都会触发该生命周期，在该钩子内可以通过参数nextProps获取变化后的props参数，通过this.props访问之前的props。该生命周期内可以进行setState。(React v16.3后废弃该生命周期，可以用新的周期 static getDerivedStateFromProps 代替)

shouldComponentUpdate(nextProps, nextState) 是否重新渲染

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。返回false则不触发渲染。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。不能在该钩子中setState，会触发重复循环。(React v16.3后废弃该生命周期，可以用新的周期 getSnapshotBeforeUpdate )

componentDidUpdate() 完成组件渲染

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。该钩子内setState有可能会触发重复渲染，需要自行判断，否则会进入死循环。

componentDidUpdate() {
    if(condition) {
        this.setState({..}) // 设置state
    } else {
        // 不再设置state
    }
}

componentWillUnmount() 组件即将被卸载

组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

生命周期图

完整的生命周期示例

class LifeCycle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {str: "hello"};
    }

    componentWillMount() {
        alert("componentWillMount");
    }

    componentDidMount() {
        alert("componentDidMount");
    }

    componentWillReceiveProps(nextProps) {
        alert("componentWillReceiveProps");
    }

    shouldComponentUpdate() {
        alert("shouldComponentUpdate");
        return true;        // 记得要返回true
    }

    componentWillUpdate() {
        alert("componentWillUpdate");
    }

    componentDidUpdate() {
        alert("componentDidUpdate");
    }

    componentWillUnmount() {
        alert("componentWillUnmount");
    }
    render() {
        alert("render");
        return(
            
                {parseInt(this.props.num)}
                

                {this.state.str}
            
        );
    }
}

React v16.3 新加入的生命周期（转载） react v16.3删掉以下三个生命周期

componentWillMount

componentWillReceiveProps

componentWillUpdate

新增两个生命周期

static getDerivedStateFromProps

getSnapshotBeforeUpdate

static getDerivedStateFromProps

触发时间：在组件构建之后(虚拟dom之后，实际dom挂载之前) ，以及每次获取新的props之后。

每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state.

配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // 没错，这是一个static
  }
}

getSnapshotBeforeUpdate

触发时间: update发生的时候，在render之后，在组件dom渲染之前。

返回一个值，作为componentDidUpdate的第三个参数。

配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法。

class Example extends React.Component {
    getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
    }
}

私有云超融合服务器生命周期软件生命周期生命周期理论页面生命周期

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

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

React16 生命周期理解

摘要：完整生命周期初始化参数第一次渲染当父组件向子组件传入发生改变后，依次调用子组件更新渲染当组件自身发生变化后组件再次更新渲染当组件卸载生命周期详解此处请求接口数据子组件获得新时触发，作用是在子组件再次渲染前，更新子组件自身的，之后会触发接受的完整生命周期 constructor(props) // 初始化参数 componentWillMount() render() // 第一次...

Flands 2019-08-23 14:38 评论0 收藏0
简述 React 组件生命周期

摘要：这个阶段只有一个方法，该方法在整个生命周期内调用且仅调用一次。在这里进行一些相关的销毁操作，比如撤销定时器，事件监听等等。详解 React 生命周期整个 React 生命周期有3个阶段：创建、更新、卸载，每个阶段有对应的工作和方法，我们可以看下面这个经典的图研究一下： showImg(https://segmentfault.com/img/remote/1460000016330...

qpal 2019-08-23 11:52 评论0 收藏0
不了解一下React16.3之后的新生命周期？

摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。 React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。 React16.3.0之前生命周期: 16版本之前的react组件的...

468122151 2019-08-23 15:41 评论0 收藏0
深入React技术栈之setState详解

摘要：除此之外指的是绕过通过直接添加的事件处理函数和产生的异步调用。但是，当在调用事件处理函数之前就会调用，这个函数会把修改为，造成的后果就是由控制的事件处理过程不会同步更新。抛出问题 class Example extends Component { contructor () { super() this.state = { value: 0, ...

leeon 2019-08-22 17:27 评论0 收藏0
深入React技术栈之setState详解

摘要：除此之外指的是绕过通过直接添加的事件处理函数和产生的异步调用。但是，当在调用事件处理函数之前就会调用，这个函数会把修改为，造成的后果就是由控制的事件处理过程不会同步更新。抛出问题 class Example extends Component { contructor () { super() this.state = { value: 0, ...

Alliot 2019-08-05 13:57 评论0 收藏0