[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