React--15:生命周期新版本
React 版本 -- 15 生命周期
2023-06-13 09:16:41 时间
这是我参与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
最后
新版和旧版本相比 废弃了三个钩子,新增了两个钩子。这两个钩子的用法我们下一篇文章再去了解。
相关文章
- React核心工作原理
- React技巧之发出http请求
- React报错之Property 'X' does not exist on type 'HTMLElement'
- react路由权限设置
- 04-React路由5版本(高亮, 嵌套, 参数传递... )
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 优雅地乱玩 Redux-2-Usage with React
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- react源码中的hooks
- React源码分析3-render阶段(穿插scheduler和reconciler)
- 快速上手 React Hook
- React魔法堂:echarts-for-react源码略读
- React魔法堂:size-sensor源码略读
- 一文带你梳理React面试题(2023年版本)
- ReactDOM.render在react中执行之后发生了什么?
- 手写迷你版react
- 从react源码角度看React-Hydrate原理
- React的从入门到升仙
- React 合成事件的源码实现
- react源码分析:深度理解React.Context
- 从零手写react-router
- React Native学习笔记(一)—— Win11安卓子系统的安装与使用 - Windows Subsystem for Android - WSA
- React学习笔记(四)—— 组件通信与状态管理、Hooks、Redux、Mobe
- React 许可证虽严苛,但不必过度 react