React类组件的生命周期
- 初始化阶段的生命周期只会执行一次钩子函数,运行中的阶段会随着状态的改变或父组件变更了属性而执行钩子函数,销毁阶段会随着组件在DOM数上被移除而触发的钩子。
- 具体看文件中的代码:https://gitee.com/manongquan02/react_test.git
新的生命周期 getDerivedStateFromProps与getSnapshotBeforeUpdate
getDerivedStateFromProps
- getDerivedStateFromProps 特点: 替代了 componentWillMount(初始化) 和 componentWillUpdate(运行中) 更安全
- getDerivedStateFromProps 在父组件传递属性变动则会影响子组件,子组件在渲染新DOM之前会触发getDerivedStateFromProps,getDerivedStateFromProps有两个参数,1.newProps 在渲染之前拿到最新的属性 2.newState 在渲染之前拿到最新的状态
- getDerivedStateFromProps的返回值为一个对象,与旧的state对象进行合并
getSnapshotBeforeUpdate
- getSnapshotBeforeUpdate的特点: 取代了 componentWillUpdate(运行中) 配合 componentDidUpdate 使用
- componentDidUpdate的参数 1. oldProps 上一次的props, 2. oldState 上一次的状态 3. getSnapshotBeforeUpdate 在更新之前返回的值
- getSnapshotBeforeUpdate 和 componentWillUpdate 的区别,执行顺序上的区别:componentWillUpdate的执行顺序是 componentWillUpdate -> render => componentDidUpdate 而 getSnapshotBeforeUpdate的执行顺序是 render => getSnapshotBeforeUpdate => componentDidUpdate 从此看出 新的生命周期(更新之前的钩子)调整了顺序 让更新之前的钩子和更新之后的钩子越来越近了。
- getSnapshotBeforeUpdate的返回值不能为undefined
本文作者:HuangBingQuan
本文链接:https://www.cnblogs.com/bingquan1/p/16930986.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步