react生命周期简述

生命周期在面试的经常问道，自己简单整理了一下，希望对你有帮助

componentDidMount:

在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

组件第一次加载时渲染完成的事件，**一般在此获取网络数据**。实际开始项目开发时，会经常用到。

在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

使用render方法返回的虚拟DOM来创建真实的DOM结构，在render方法成功调用并且真实的DOM已经被渲染之后，你可以在componentDidMount内部通过this.getDOMNode() 方法访问到它（0.14版本之后，替换成ReactDOM.findDOMNode()）

componentDidMount:function(){

var canvasNode = this.refs.mainCanvas.getDOMNode()

/ /此处是有效的，我们可以访问到节点，并可以调用painting方法

// ref = "mainCanvas"

扫描二维码关注公众号，回复： 2429610 查看本文章

}

* **`componentWillMount`**

在渲染前调用,在客户端也在服务端。

在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

根据**业务逻辑来对state进行相应的操作**。

该方法会在完成渲染之前被调用，这也是在render方法调用前，可以修改组件state的最后一次机会。

业务逻辑的处理都应该放在这里，例如对state的操作等。

**不可以在这里使用 AJax加载组件的数据，因为无法保证数据将会在组件DOM渲染完成后到达。**

* **`shouldComponentUpdate`** `在初始化时不会被调用`

返回一个**布尔值**。在组件接收到新的props或者state时被调用。**在初始化时或者使用forceUpdate时不被调用**。

可以在你确认不需要更新组件时使用。

主要用于**性能优化，React 的性能优化也是一个很重要的话题**.

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

this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this)**构造函数**

如果shouldComponentUpdate()返回false，则不会调用componentWillUpdate()。

如果shouldComponentUpdate()返回false，则不会调用componentDidUpdate()。

* **`componentDidUpdate`** `在初始化时不会被调用`

组件更新了之后触发的事件，**一般用于清空并更新数据**。实际开始项目开发时，会经常用到。

在组件完成更新后立即调用。。

* **`componentWillUpdate`** `在初始化时不会被调用`

在组件接收到新的props或者state但还没有render时被调用。

**shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。**

* **`componentWillUnmount`**

在组件从 DOM 中移除的时候立刻被调用。

**组件在销毁之前触发的事件，一般用户存储一些特殊信息，以及清理`setTimeout`事件等。**

* **`componentWillReceiveProps`**

组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

componentWillMount：组件挂载之前执行，只执行一次

render()

componentDidMount: 组件渲染完成，只执行一次

=======================================================

componentWillRecevieProps: 组件将要接收新的props执行

shouldComponentUpdate: 判断组件是否应该重新渲染，默认是true

componentWillUpdate: 组件将要重新渲染

render()

componentDidUpdate: 组件重新渲染完成

=======================================================

componentWillUnmount: 卸载组件

shouldComponentUpdate 这个生命周期可以做一些简单的性能优化，方法如下：

```jsx
constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); //第一种性能优化  
}

```

##性能优化 第二种

```jsx
constructor(props, context) {
        super(props, context);
        this.state = {
            count: 1
        };
    }

    handleChangeCount() {
        console
        this.setState({
            count: 2
        })
    }

    // 第二种性能优化
    // 组件仅仅会校验prop.color和state.count,如果这些值都不会改变，那么组件就不会有更新
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.contentBB == nextProps.contentBB) {//接受上一个组件的状态
            return false;
        }
        if (this.state.count == nextState.count) {
            return false;
        }
        return true;
    }
```
##性能优化 第三种

```jsx

shouldComponentUpdate(nextProps, nextState) {
    if (_.isEqual(this.props, nextProps) || !_.isEmpty(this.props)) {
        return false
    }
    return true
}

/* 
高级版本
还有一种更加高级好用的写法，除了比较props之外，我们同时需要比较state是否更新。 
*/
if (!_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState)) {
   return true
} else {
   return false
}

/* 这里用到了_.isEqual和_.isEmpty，_.isEqual判断当前传进来的值和下一次传递的值是不是相等，是则返回true，_.isEmpty判断当前传递进来的对象是不是为空，为空则返回true。
_.isEqual和_.isEmpty是 lodash 插件里面的函数，这是个轻巧的JavaScript函数插件，可以处理多种常见的数据操作，当然还有一个更多功能的插件。
在你的react项目的入口js导入lodash，因为lodash函数是全局的，所以只需要在入口导入一次即可。 
安装

npm install --save lodash
app.js

import 'lodash'
*/
```

react生命周期简述

猜你喜欢