05-组件生命周期及diff算法

---

生命周期回调函数

理解

1.组件从创建到死亡它会经历一些特定的阶段。
2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

旧

		/* 
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
									1.	constructor()
									2.	componentWillMount()
									3.	render()
									4.	componentDidMount() =====> 常用
													一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件render触发
									1.	shouldComponentUpdate()  ---forceUpdate() 强制更新，无需改变状态，强制更新
									2.	componentWillUpdate()
									3.	render() =====> 必须使用的一个
									4.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
									1.	componentWillUnmount()  =====> 常用
													一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
		*/

  // 注意：在子组件将要接收新的props时调用
        //组件将要接收新的props的钩子
        componentWillReceiveProps(props) {
          console.log("B---componentWillReceiveProps", props);
        }

新

			/* 
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
								1.	constructor()
								2.	getDerivedStateFromProps 
								3.	render()
								4.	componentDidMount() =====> 常用
											一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
								1.	getDerivedStateFromProps
								2.	shouldComponentUpdate()
								3.	render()
								4.	getSnapshotBeforeUpdate
								5.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
								1.	componentWillUnmount()  =====> 常用
											一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
			*/

  //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
        static getDerivedStateFromProps(props, state) {
          console.log("getDerivedStateFromProps", props, state);

          // 必须有返回值，1.state Obj 或 2.null
          return null;
        }

       //在更新之前获取快照
        getSnapshotBeforeUpdate() {
          console.log("getSnapshotBeforeUpdate");
			
		 // 必须有返回值，1.一个快照（任何值） 或 2.null
          return "aaa";
        }

        //组件更新完毕的钩子
        componentDidUpdate(preProps, preState, snapshotValue) {
          console.log("Count---componentDidUpdate", preProps, preState, snapshotValue);
        }

---

生命周期总结

重要的勾子

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

现在（16.x）使用会出现警告，下一个大版本(17/18)需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

---

DOM的diffing算法

key的作用

经典面试题:

1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?

		1. 虚拟DOM中key的作用：
				1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

				2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 
											随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

								a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
											(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
											(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

								b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
											根据数据创建新的真实DOM，随后渲染到到页面
								
		2. 用index作为key可能会引发的问题：
							1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
											会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

							2. 如果结构中还包含输入类的DOM：
											会产生错误DOM更新 ==> 界面有问题。
											
							3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
								仅用于渲染列表用于展示，使用index作为key是没有问题的。
				
		3. 开发中如何选择key?:
							1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
							2.如果确定只是简单的展示数据，用index也是可以的。