react生命周期

 

 

一、生命周期  componentDidMount 和 componentWillMount

在生命周期的这一步发起ajax请求

因为请求是异步的，效果上放在哪都一样，但是componentDidMount中可以使用refs。(Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄,我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返)
官方也是推荐在componentDidMount中进行请求，当然放在willMount中可能会快一点，毕竟先运行

 componentDidMount() {  //渲染完成后调用一次，这个时候DOM结构已经渲染了,在这个阶段，实例和dom已经挂载完成，可以进行相关的dom操作

 console.log(this.test) // 输出 <div>123</div>

}

 return (

　　 <div ref={(test) => {this.test = test}}>123</div>

）

 

 componentDidUpdate() { // 组件更新结束之后执行，在初始化render时不执行
        this.setState({
           //更新中
        }, () => {
            console.log(this.state.val)
        });
    }

两者区别：

1、componentWillMount  将要装载，在render之前调用；

      componentDidMount，（装载完成），在render之后调用

2、componentWillMount  每一个组件render之前立即调用；

      componentDidMount  render之后并不会立即调用，而是所有的子组件都render完之后才可以调用

3、componentWillMount  可以在服务端被调用，也可以在浏览器端被调用；

      componentDidMount  只能在浏览器端被调用，在服务器端使用react的时候不会被调用

 

二、当组件发生更新时，组件的生命周期调用顺序

componentWillReceivProps -> shouldComponentUpdate -> componentWillUpdata ->  render ->  componentDidUpdate

组件收到新的props（props中的数据并不一定真正发生变化）—>决定是否需要继续执行更新过程 —>组件重新计算出新的虚拟Dom —> 虚拟Dom对应的真实Dom更新到真实Dom树中

 

三、shouldComponentUpdate 生命周期

react 性能优化

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新

比如：

我们知道父级组件的render函数的重新渲染会引发子组件的render方法的重新渲染，但是有的时候子组件接收父组件的数据没有变动。子组件render的执行就会影响性能

四、触发多少次setstate，那么render会执行几次

 

多次setState会合并为一次render，因为setState并不会立即改变state的值，而是将其放到一个任务队列里，最终将多个setState合并，一次性更新页面。所以我们可以在代码里多次调用setState，每次只需要关注当前修改的字段即可