006 组件的生命周期

[A] 生命周期

　　1. React中提供了一下钩子函数，也叫生命周期函数

　　2. 这些钩子函数与render方法并列（render也属于一种生命周期函数·），直接写成 xxx(){} 形式即可

 

[B] 主要的生命周期函数：(按顺序)

　　初次渲染阶段：

　　　　初始化：

　　　　　　constructor() {}

　　　　组件挂载前：

　　　　　　componentWillMount() {}

　　　　组件渲染：

　　　　　　render() {}

　　　　组件挂载完成后：

　　　　　　componentDidMount() {}

　　　　组件卸载完成：

　　　　　　componentWillUnmount() {}

　　更新阶段：

　　　　子组件在接收到新的props之前

　　　　　　componentWillReceiveProps() {}

　　　　　　注：这个周期函数会接收到props参数，并且在初次渲染的时候不执行，当父组件状态更新，再次渲染时才会触发

　　　　控制组件是否更新的"阀门"

　　　　　　shouldComponentUpdate() {}

　　　　组件更新前：

　　　　　　componentWillUpdate() {}

　　　　组件更新完成:

　　　　　　componentDidUpdate() {}

 

[C] 组件的强制更新

　　有时候组件中未进行数据修改，但我们也想要强制刷新数据，此时可以使用组件自身上挂载的 forceUpdate() 方法去强制更新

 

[D] 新版本生命周期

　　1. 上述所讲的生命周期为 V16 版本的，我们称之为旧的生命周期

　　2. 当前已经经历过 V17 版本了，目前最新的版本为 V18 版本

　　3. 新版本中，做了一些修改：

　　　　剔除了三个生命周期：

　　　　　　componentWillMount

　　　　　　componentWillUpdate

　　　　　　componentWillReceiveProps

　　　　新增了两个生命周期：

　　　　　　getDerivedStateFromProps

　　　　　　getSnapshotBeforeUpdate

　　4. 新版本中

　　　　在V17，被剔除的三个生命周期依然可以用，但会报警告，提示在这三个生命周期名称前添加 UNSAFE_ 前缀

　　　　在V18，据说要直接禁止使用这三个被剔除的生命周期，但依然还可以用，和V17一模一样使用

　　　　在之后的版本中，也许会禁止使用

 

[E] 新版本中的主要周期

　　初始化阶段：

　　　　初始化：

　　　　　　constructor() {}

　　　　从参数中获取派生状态:

　　　　　　static getDerivedStateFromProps() {}

　　　　组件渲染：

　　　　　　render() {}

　　　　组件挂载完成：

　　　　　　componentDidMount() {}

　　更新阶段：

　　　　从参数中获取派生状态

　　　　　　static getDerivedStateFromProps() {}

　　　　控制组件是否更新的"阀门"：

　　　　　　shouldComponentUpdate() {}

　　　　组件快照：

　　　　　　getSnapshotBeforeUpdate() {}

　　　　组件更新完成:

　　　　　　componentDidUpdate() {}

　　卸载组件：

　　　　组件卸载完成：

　　　　　　componentWillUnmount() {}

 

[F] 新增生命周期介绍

　　getDerivedStateFromProps() {}

　　　　1. 这个生命周期函数必须定义在类自身上，而不是放在原型链上供实例使用，因此必须用 static 关键字进行标识

　　　　2. 在constructor之后，render之前调用

　　　　3. 使用了该生命周期，则以下三个生命周期将不可在使用，强行使用报错：

　　　　　　UNSAFE_componentWillMount

　　　　　　UNSAFE_componentWillReceiveProps

　　　　　　UNSAFE_componentWillUpdate

　　　　4. 该生命周期必须返回一个 Object 类型，在返回值中可以对当前组件中的state的某些属性进行修改，并且禁止之后再被修改

　　　　5. 该生命周期可以接受一个两个参数，(props, state),即父组件传过来的props和组件自身的状态state

　　　　6. 该生命周期使用场场景很少，并且不推荐使用，会造成代码冗余且难以维护

　　getSnapshotBeforeUpdate() {}

　　　　1. 该生命周期表达的意思是，状态更新后，DOM更新前，来获取当前DOM的一些关键信息

　　　　　　使用场景：

　　　　　　　　在数据更新后，通过快照，获取到当前DOM的页面宽度，元素高度等，因为此后DOM会更新，之前的DOM页面会被销毁

　　　　2. 该快照函数，必须返回一个快照值(任何数据均可), 返回的这个值会被当做参数传递给 componentDidUpdate 生命周期。

　　　　3. 关于componentDidUpdate()参数的说明

　　　　　　实际上，componentDidUpdate会接收三个参数：

　　　　　　componentDidUpdate(prevProps, prevState, snapshotValue)

　　　　　　　　prevProps: 状态更新前的props值

　　　　　　　　prevState: 状态更新前的state值

　　　　　　　　snapshotValue: getSnapshotBeforeUpdate返回的快照值

　　　　4. 该生命周期还使用场景很少

 

[G] Diff算法经典面试题

　　React/Vue中的key有什么作用?

　　　　1) 虚拟DOM中key的作用

　　　　　　a) 简单的说，key是虚拟DOM对象的表示，在额更新显示时，key骑着极其重要的作用

　　　　　　b) 详细点说：

　　　　　　　　当状态中的数据发生变化时，react会根据更新后的数据生成新的虚拟DOM树

　　　　　　　　随后react进行新的虚拟DOM树与旧的DOM树的比较(Diff算法), 比较规则如下：

　　　　　　　　　　1. 在旧虚拟DOM树上找到了与新虚拟DOM树上相同的key：

　　　　　　　　　　　　若虚拟DOM树的内容没有变，则直接使用之前的真实DOM

　　　　　　　　　　　　若虚拟DOM树中的内容变了，则生成新的真实DOM，并替换掉页面中旧的真实DOM

　　　　　　　　　　2. 在旧虚拟DOM树上未找到与新虚拟DOM相同的key

　　　　　　　　　　　　根据数据创建新的真实DOM，并替换掉页面上旧的真实DOM

　　　　2) 用index作为key可能引发的问题

　　　　　　1. 若对数据进行修改，如逆序添加，逆序删除等破坏顺序的操作

　　　　　　　　会产生没有必要的新的真实DOM的销毁和删除 => 页面效果没变，但效率变低了

　　　　　　2. 如果结构中还包含输入类的DOM

　　　　　　　　还会产生错误的DOM的更新 => 页面有问题

　　　　　　3. 注意！如果不存在逆序添加，逆序删除等破坏顺序的操作

　　　　　　　　仅用于渲染数据作展示，使用index做key是没有问题的

　　　　3) 开发中如何选择key？

　　　　　　1. 最好使用每条数据的唯一标识作为key，如id，手机号，身份证号，学号等

　　　　　　2. 若知识单纯的数据展示，用index也不影响