[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也不影响
标签：生命周期,DOM,更新,虚拟,006,key,组件 From： https://www.cnblogs.com/carreyBlog/p/16776669.html