react 生命周期

Dear 丶 2022-05-11 03:44 334阅读 0赞

### Ract生命周期 ###

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

![588767-20161205190022429-1074951616.jpg][]

*  **初始化**

*1、getDefaultProps()*

> 设置默认的props，也可以用dufaultProps设置组件的默认属性.

*2、getInitialState()*

> 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props

*3、componentWillMount()*

> 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。

*4、 render()*

> react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

*5、componentDidMount()*

> 组件渲染之后调用，只调用一次。

*  **更新**

*6、componentWillReceiveProps(nextProps)*

> 组件初始化时不调用，组件接受新的props时调用。

*7、shouldComponentUpdate(nextProps, nextState)*

> react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候

*8、componentWillUpdata(nextProps, nextState)*

> 组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

*9、render()*

> 组件渲染

*10、componentDidUpdate()*

> 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

*  **卸载**

*11、componentWillUnmount()*

> 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

[588767-20161205190022429-1074951616.jpg]: /images/20220511/9915b1cd4e40459d96ed4ff1b7593ead.png

发表评论取消回复

表情：

评论列表（有 0 条评论，334人围观）

还没有评论，来说两句吧...

相关阅读

相关 REACT_react生命周期

componentWillMount() { console.log('组件将要挂载'); }; componentDidMount()

本是古典何须时尚/ 2023年03月01日 09:37/ 0 赞/ 19 阅读

相关 react生命周期

只有类组件才有生命周期，函数组件没有生命周期。页面渲染期： constructor 构造函数 UNSAFE\_componentWillMount 组件将要挂载

傷城~/ 2022年12月05日 10:20/ 0 赞/ 211 阅读

相关 React 生命周期

目录 React 生命周期图一、生命周期路径一，初始化组件过程 1、getDefaultProps 2、getInitialState 3、componentWil

刺骨的言语ヽ痛彻心扉/ 2022年10月02日 06:52/ 0 赞/ 230 阅读

相关 React生命周期

React生命周期钩子函数执行顺序 constructor => render =>componentDidMount ![在这里插入图片描述][watermark

骑猪看日落/ 2022年09月06日 01:40/ 0 赞/ 273 阅读

相关 React生命周期

转载：[React数据获取为什么一定要在componentDidMount里面调用？][React_componentDidMount] https://segment

拼搏现实的明天。/ 2022年05月21日 02:30/ 0 赞/ 293 阅读

相关 react 生命周期

Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 ![588767-20161205190022429-1074951616.jpg

Dear 丶/ 2022年05月11日 03:44/ 0 赞/ 335 阅读

相关 react生命周期

前言学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始

傷城~/ 2022年05月08日 12:08/ 0 赞/ 314 阅读

相关 React生命周期

![1536650259710157.png][] 以上图片来自百度图库 componentWillMount 在渲染前调用,在客户端也在服务端。 compon

绝地灬酷狼/ 2022年03月09日 14:28/ 0 赞/ 303 阅读

相关 react生命周期

react生命周期，一直只关心自己常用的那几个，虽然基本能解决99%的问题，但是当被问到的时候，说的不清不楚还是让我很惭愧，所以今天我就专门来梳理一下react的生命周期 1

- 日理万妓/ 2022年03月07日 10:10/ 0 赞/ 310 阅读

相关 React生命周期

1、17版之前的生命周期图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

逃离我推掉我的手/ 2021年09月18日 14:32/ 0 赞/ 516 阅读