您现在的位置是:首页 > Javascript
当前栏目
React--15:生命周期新版本
2023-02-25 18:16:22 时间
这是我参与8月更文挑战的第22天,活动详情查看:8月更文挑战
首先我们来看一张图,这是新版本的生命周期图
查看React的版本
我这个可以看到是17,现在好像已经到18了。
我们还是用上篇文章的计数器来作为例子
class Count extends React.Component {
constructor(props) {
console.log("count-constructor")
super(props)
// 初始化状态
this.state = {
count: 0
}
}
// 将要挂载
componentWillMount() {
console.log("componentWillMount")
}
//挂载完毕
componentDidMount() {
console.log("componentDidMount")
}
// +1 按钮回调
add = () => {
//获取原状态
const { count } = this.state
// 更新状态
this.setState({ count: count + 1 })
}
// 卸载组件的回调
death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
// 组件将要卸载调用
componentWillUnmount() {
console.log("componentWillUnmount")
}
// 控制组件更新的“阀门”
shouldComponentUpdate() {
console.log("shouldComponentUpdate")
return true
}
// 组件将要更新的钩子
componentWillUpdate() {
console.log("componentWillUpdate")
}
// 组件更新完毕的钩子
componentDidUpdate() {
console.log("componentDidUpdate")
}
force = () => {
this.forceUpdate()
}
render() {
console.log("count-render")
return (
<div>
<h1>当前求和为{this.state.count}</h1>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>销毁</button>
<button onClick={this.force}>强制更新</button>
</div>
)
}
}
旧版本生命周期
我们再看一下旧版本的生命周期图
三个钩子改了名字
旧版本中我们也见过这些钩子函数。那么新版本究竟差在哪里?虽然,没有影响页面
的渲染,但可以看到控制台中已经给出了警告。
警告的意思componentWillMount已经改名为UNSAFE_componentWillMount
componentWillUpdate已经改名为 UNSAFE_componentWillUpdate
忘了一个componentWillRecieveProps钩子,这个钩子是接收到props时才会触发的,所以我们再写一个子组件。并在 <Count/>
中引用 <B/>
组件
class B extends React.Component {
componentWillReceiveProps(){
console.log("componentWillReceiveProps")
}
render() {
return (
<div>我是B组件,接收到的是{this.props.carName}</div>
)
}
}
ReactDOM.render(<Count carName="BM"/>, document.getElementById('root'))
可以看到同样是有警告的(记住componentWillRecieveProps在接收到第二次props时才会打印,也就是更新时才会执行)
怎么记忆哪个钩子改名了呢?除了componentWillUnmount的其他 名字中带Will 的钩子。都需要加UNSAFE_
新增两个钩子
我们从挂载时开始对比:
- 新的和旧的刚开始都走了构造器constructor
- 新的没有 componentWillMount,在这个位置出现了个getDerivedStateFromProps
- 新旧接下来都是render
- 新的多了一个React更新DOM和ref,其实旧版本也更新了,只是没画出来。这部分是我们没有办法插手的。
- 接下来执行的都是componentDidMount
卸载时:
- 旧的挂载和更新最终都会到componentWillUnmount。其实新的也是,只是单列出来了。
更新时:
- commentWillReceiveProps不见了 换成了getDerivedStateFromProps。getDerivedStateFromProps横跨了挂载和更新。
- 新旧 都会经过“阀门” shouldComponentUpdate
- 旧版本的render和componentDidUpdate之间是没有其他钩子的。而新版新增了getSnapshotBeforeUpdate
最后
新版和旧版本相比 废弃了三个钩子,新增了两个钩子。这两个钩子的用法我们下一篇文章再去了解。
相关文章
- [你必须知道的JavaScript]解构赋值
- JavaScript基础
- 手写一个格式化json工具
- threejs旋转入门
- 我用nodejs实现了热加载接口文件,感觉又离“serverless”进了一步
- nodejs 解决sql注入方案
- nvm-windows管理nodejs版本神器——代理和镜像配置
- 关于node代码如何丝滑执行多条命令行这件事
- JavaMoney规范(JSR 354)与对应实现解读
- Node.js 应用全链路追踪技术——[全链路信息获取]
- api接口返回动态的json格式?我太难了,尝试一下 linq to json
- 对 JsonConvert 的认识太肤浅了,终于还是遇到了问题
- Node.js 模块化你所需要知道的事
- 初识 D3.js :打造专属可视化
- knockoutjs如何动态加载外部的file作为component中的template数据源
- NodeJs和NPM的基本操作
- 使用 System.Text.Json 时,如何处理 Dictionary 中 Key 为自定义类型的问题
- 如何使用 System.Text.Json 序列化 DateTimeOffset 为 Unix 时间戳
- javascript使用正则表达式替换或者捕获子字符串
- FastAPI从入门到实战(14)——JSON编码兼容与更新请求