React旧版本与React16中生命周期的区别

简介: React旧版本与React16中生命周期的区别

1.React16新的生命周期弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate

2.新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数(componentWillMount、componentWillReceivePorps,componentWillUpdate)

3.React16并没有删除这三个钩子函数,但是不能和新增的两个钩子函数(getDerivedStateFromProps、getSnapshotBeforeUpdate)混用。

注意:React17将会删除componentWillMount、componentWillReceivePorps,componentWillUpdate

4.React16新增了对错误处理的钩子函数(componentDidCatch)

一、React旧版本生命周期

demo1.png

1、子组件(child conponent)首次挂载

依次触发了Child组件的:

constructor,

componentWillMount,

render,

componentDidMount。

2、子组件props发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

componentWillReceiveProps,

shouldComponentUpdate,

componentWillUpdate,

render,

componentDidUpdate。

(2)shouldComponentUpdate返回false

只调用了Child组件的:

componentWillReceiveProps,

shouldComponentUpdate。

3、子组件state发生改变

依次调用了Child组件的:

shouldComponentUpdate,

componentWillUpdate,

render,

componentDidUpdate。

与2相比,3中缺少了componentWillReceiveProps,这是因为componentWillReceiveProps在组件接收到一个新的props时才会被调用(注:这个方法在第一次渲染时不会被调用)。

二、React16生命周期

c67d298d19474d72921ca4870de73d76~tplv-k3u1fbpfcp-watermark.png

1、子组件(child component)首次被挂载

依次触发了Child组件的:

constructor,

getDerivedStateFromProps,

render,

componentDidMount。

2、子组件props发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate,

render,

getSnapshotBeforeUpdate,

componentDidUpdate。

(2)shouldComponentUpdate返回false

只调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate。

3、子组件state发生改变

(1)shouldComponentUpdate返回true

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate,

render,

getSnapshotBeforeUpdate,

componentDidUpdate。

(2)shouldComponentUpdate返回false

依次调用了Child组件的:

getDerivedStateFromProps,

shouldComponentUpdate。

与2中修改子组件(child component)的props时相同。

目录
相关文章
|
12天前
|
前端开发 JavaScript API
Vue.Draggable 和 React Beautiful DND 有什么区别
Vue.Draggable 和 React Beautiful DND 是两个用于 Vue.js 和 React 的拖拽排序库。Vue.Draggable 提供 Vue 指令,适合 Vue 应用,支持列表排序和自定义数据处理,具有多种事件回调和配置选项。React Beautiful DND 则为 React 提供组件,能处理复杂拖拽场景,通过回调函数更新状态,配置选项包括限制拖拽范围和自定义动画。
|
16天前
|
前端开发 JavaScript 开发者
React的函数组件与类组件:探索两者之间的区别
【4月更文挑战第25天】React提供函数组件和类组件,两者在语法、状态管理、生命周期和性能优化上有所不同。函数组件简单且易于理解,使用 Hooks 可添加状态管理;类组件支持复杂状态管理和生命周期方法,适用于需要精细控制更新的场景。随着 Hooks 的发展,函数组件功能增强,成为更多开发者的首选。选择组件类型应根据实际需求权衡。
|
23天前
|
JavaScript 前端开发 开发者
你知道 React 和 Vue 的区别?
【4月更文挑战第16天】React与Vue是两种流行的前端框架,各有特色。React是JavaScript库,强调组件化和函数式编程,使用虚拟DOM提升性能;Vue是渐进式框架,提供全面解决方案,更易上手。React采用单向数据流和状态管理库如Redux,Vue则有双向数据绑定和响应式系统。组件通信方面,React依赖props和context,Vue更灵活,提供插槽和提供/注入。虚拟DOM实现上,React注重效率,Vue强调易用性。学习曲线方面,React社区活跃但学习难度稍大,Vue文档清晰,易于入门。选择框架应考虑项目需求、团队技能和个人偏好。
9 0
|
1月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
16 0
|
1月前
|
JavaScript 前端开发
vue和react的区别
vue和react的区别
|
1月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
|
1月前
|
JavaScript 前端开发 算法
vue与react的区别?
vue与react的区别?
15 1
|
3月前
|
JavaScript 前端开发 API
vue和react的区别是什么
vue和react的区别是什么
36 2
|
4月前
|
前端开发
React旧有生命周期和新生命周期的解析
React旧有生命周期和新生命周期的解析
30 0
React旧有生命周期和新生命周期的解析
|
4月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
76 1