React生命周期总结（新旧版本都有），React即将废弃的勾子
旧版生命周期（16版本）
初始化阶段：由ReactDOM.render()触发 – 初次渲染
- constructor()
- componentWillMount()「新版本不推荐使用」
- render()
- componentDidMount()
更新阶段：由组件内部this.setState() 或父组件重新render触发
- shouldComponentUpdate()
- componentWillUpdate()「新版本不推荐使用」
- render()
- componentDidUpdate()
卸载组件阶段：由ReactDOM.unmountComponentAtNode() 触发
- componentWillUnmount()
新版生命周期（17版本）
初始化阶段：由ReactDOM.render()触发 – 初次渲染
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
更新阶段：由组件内部this.setState() 或父组件重新render触发
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapShotBeforeUpdate()
- componentDidUpdate()
卸载组件阶段：由ReactDOM.unmountComponentAtNode() 触发
- componentWillUnmount()
即将废弃的勾子
- componentWillUpdate()
- componentWillReceiveProps()
- componentWillMount()
记法：除了componentDidUpdate()这个组件卸载阶段的勾子外，其他带Will的勾子在新版本中都不推荐使用
⚠️ componentWillUpdate()、componentWillReceiveProps()、componentWillMount()在react新版本中需要加上UNSAFE_前缀才可以使用，否则会出现警告，而且在未来的版本中，这3个勾子可能被废弃。
来源：
尚硅谷React教程，这个课很好
React生命周期总结（新旧版本都有），React即将废弃的勾子相关推荐
- React生命周期(包含新旧流程图对比)
React生命周期 文章目录 React生命周期 对于生命周期的理解 重要的生命周期勾子 废弃的勾子 生命周期流程图(旧) 生命周期流程图(新) React 16.8以后的生命周期分为三个阶段,分别是 ...
- 浅谈 React 生命周期
浅谈 React 生命周期 浅谈 React 生命周期 旧版的生命周期 新版的生命周期 详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
- react生命周期详细介绍
目录 挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
- react 生命周期
1.组件从创建到死亡它会经历一些特定的阶段. 2.React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用. 3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作. 一 ...
- react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载 首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
- React新旧版本生命周期对比
React新旧版本生命周期对比 ❶ 过时生命周期: ① componentWillMount ② componentWillReceiveProps ③ componentWillUpdate ❷ 即 ...
- React 生命周期总结（新旧对比）
一.生命周期(旧) //案例:点击按钮加1 class Count extends React.Component{//1.构造器constructor(props){super(props)//初始 ...
- reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比
reactjs组件生命周期:componentWillReceiveProps及新旧版本生命周期钩子函数对比
- react 生命周期详解
React-ES6 : class App extends React.Component {static get propTypes() {return {//nameProp: PropTypes ...
最新文章
- ASP.NET Razor – C# 逻辑条件简介
- 流程控制之for循环
- php 验证qq密码错误,QQ输入正确密码却验证错误的解决办法
- Spring配置内置的连接池DriverManagerDataSource
- Spring mvc 内置编码过滤器原理解析
- 一个关于文件结构体数组的条件排序函数
- win7系统office向程序发送命令时出现错误
- Java基础0309
- 用MDT 2012为企业部署windows 7（三）--安装MDT 2012，ADK以及安装后情况
- leetcode-884-两句话中的不常见单词
- 网络内共享计算机无法访问,如何解决无法访问局域网内共享文件夹的问题？
- dell emc isilon环境 Windows共享文件下生成.snapshot无法删除
- UStore-添加自定义工作流（JDF）到产品
- 软件开发2：代码检视
- 1. 人工智能（AI）概述
- 联发科（MTK）MT6765 核心板 安卓主板
- C/C++——文字RPG游戏：MINERPG
- 可视化篇：Echarts2.0引入百度地图(转载)
- 基于eBPF的云原生可观测性开源工具Kindling之Kindling-agent 性能测试评估
- 百度手游虚拟服务器,百度发布“云手机”：可实现安卓App的云端运行