React的生命周期 和 页面优化
React的生命周期 和 页面优化
先上React的生命周期图
页面优化问题在 shouldComponentUpdate 函数那里写的（有颜色备注）
React声明周期的四个大阶段：
- Initialization:初始化阶段。
- Mounting: 挂在阶段。
- Updation: 更新阶段。
- Unmounting: 销毁阶段。
什么是生命周期函数
用大神 技术胖 来说就是
生命周期函数指在某一个时刻组件会自动调用执行的函数
阶段说明
Initialization指的是初始化过程，这个时候组件会初始化自己的一些数据，比如props，比如state，constructor就是我们初始化的位置，在这里会定义state，会接收props。 代码就不上了，大家有兴趣可以看看官网文档 ，也就不过多解释了
-
1 Mounting 挂载阶段
Mounting阶段叫挂载阶段，伴随着整个虚拟DOM的生成，它里边有三个小的生命周期函数，分别是：
componentWillMount : 在组件即将被挂载到页面的时刻执行。 render : 页面state或props发生变化时执行。 componentDidMount : 组件挂载完成时被执行。
执行代码：
//componentWillMount代码
componentWillMount(){
console.log('我是componentWillMount--组件将要挂载到页面的时刻出现')
}
//componentDidMount代码
componentDidMount(){
console.log('我是componentDidMount--组件挂载完成的时刻执行出现')
}
//render代码 （必写）
render(){
console.log('我是render-组件挂载中出现')
}
打印出来的顺序是
- componentWillMount
- render
- componentDidMount
注意的问题
componentWillMount和componentDidMount这两个生命周期函数，只在页面刷新时执行一次，而render函数是只要有state和props变化就会执行。
-
2 Updation 更新阶段
Updation也就是组件发生改变的更新阶段，这是React生命周期中比较复杂的一部分，它有两个基本部分组成，一个是props属性改变，一个是state状态改变（这个在生命周期的图片中可以清楚的看到，props比state 只多了一个componentWillReceiveProps 函数）。执行代码：
// componentWillReceiveProps 函数
// **注意** 这个是写在子组件中的 // 因为顶层组件，它并没接收任何的props
componentWillReceiveProps(){
//凡是组件都有生命周期函数，所以子组件也是有的，并且子组件接收了props，这时候函数就可以被执行了。
console.log('child - componentWillReceiveProps')
}
子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
- 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
- 如果已经存在于Dom中，函数才会被执行。
//shouldComponentUpdate函数代码
//它要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个true
shouldComponentUpdate(){
console.log('shouldComponentUpdate---组件发生改变前执行')
return true
}
这里写一下shouldComponentUpdate的重要性 也是页面标题写的 页面优化问题
- shouldComponentUpdate函数会在组件更新之前，自动被执行。
- 它要求返回一个布尔类型的结果，必须有返回值，true和false
- 简单点说，就是返回true，就同意组件更新;返回false,就反对组件更新。
页面优化问题
在子组件频繁无用渲染render，这样项目小的话 看上去没有问题性能损耗很小，但是当你页面很复杂时，足以影响用户体验，积少成多嘛，性能损耗会增加 页面会卡顿，肯定会被组长或总监骂死的；
这里用shouldComponentUpdate 就能解决了
首先你要确认你安装了谷歌 React Developer Tools 插件，如果你没有安装，可以到百度一下安装。有了这个浏览器插件，就可以在控制台中找到React标签，然后在右边点开设置，选中highlight Updates。
这时候你在浏览器的文本框中输入一下内容，你可以清楚的看到子组件也发生了重新render的情况。
代码如下：
shouldComponentUpdate(){
return false;
}
这时候在浏览器中查看，问题已经没有了。但是这样做太暴力了，否定了所有的东西，那如果在真实项目中，需要改变值属性值，达到渲染就没办法了
shouldComponentUpdate有两个参数（相当有用）：
1. nextProps:变化后的属性;
2. nextState:变化后的状态;
//示例
shouldComponentUpdate(nextProps,nextState){
//content 父传过来的数据 可以按自己项目需求写
if(nextProps.content !== this.props.content){
return true
}else{
return false
}
}
这样就解决了子组件的渲染性能问题
我们接着说 Updation 后面的俩个函数 componentWillUpdate和componentDidUpdate
componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
//componentWillUpdate函数 代码
//shouldComponentUpdate返回true才会被执行。
componentWillUpdate(){
console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
}
//componentDidUpdate函数 代码
//componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节。
componentDidUpdate(){
console.log('componentDidUpdate----组件更新之后执行')
}
打印出来的顺序是
- 1、shouldComponentUpdate
- 2、componentWillUpdate
- 3、render
- 4、componentDidUpdate
- 3 Unmounting 销毁阶段
把最后一个React的生命周期函数讲一下，这个生命周期周期函数就是componentWillUnmount，它是在组件去除时执行。
这个函数时组件从页面中删除的时候执行 (子组件)
//当组件从页面中删除的时候执行
componentWillUnmount(){
console.log('child - componentWillUnmount')
}
。
。
。
。
。
。
。
。
这里好多都是听大神 技术胖讲的 自己整理的 ，有兴趣的朋友去看看