react 生命周期函数有哪些

朱雀 2020-07-01 18:00 752阅读 0赞

# react 生命周期函数有哪些

#### react 生命周期函数

#### 初始化

##### 1.getDefaultProps()

注：getDefaultProps这种定义方式是用在你定义组件用的是React.createClass方式的
如果使用的是es6的语法，例如用的是class 组件名 extends React.Component的话，就不要用
getDefaultProps这种方式去定义props了，而是应该用 static propTypes ＝｛｝来定义，这样就不会有警了

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

##### 2.getInitialState()

注：与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义 this.state。此时可以访问this.props

##### 3.componentWillMount

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

##### 4. render()

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

##### 5.componentDidMount()

注：组件渲染之后调用，只调用一次。可以在此请求数据

#### ·更新

##### 1.componentWillReceiveProps(nextProps)

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

##### 2.shouldComponentUpdate(nextProps, nextState)

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

##### 3.componentWillUpdata(nextProps, nextState)

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

##### 4.render()

注：组件渲染

##### 5.componentDidUpdate()

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

#### ·卸载

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

发表评论取消回复

表情：

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

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

相关阅读

相关 React 生命周期函数

[React v16.4 生命周期图示][React v16.4] ![1731684-20190810171825486-293040245.png][] 一、组件

叁歲伎倆/ 2023年06月02日 09:17/ 0 赞/ 18 阅读

相关 react生命周期函数_「React 手册」组件生命周期函数——shouldComponentUpdate介绍

![abd76e08ee07cbeba2aae51d1127613d.png][] 大家好，在「React 手册」组件生命周期相关函数——componentWillMoun

古城微笑少年丶/ 2023年01月12日 10:18/ 0 赞/ 287 阅读

相关 React生命周期函数

React生命周期函数 (旧) class Count extends React.Component{ //构造器 constructo

ゝ一世哀愁。/ 2023年01月07日 11:25/ 0 赞/ 189 阅读

相关【React】1.React生命周期函数

一.React生命周期函数概述生命周期函数指在某一时刻组件会自动调用执行的函数，如下是React生命周期图解 ![watermark_type_ZmFuZ3poZW5na

以你之姓@/ 2022年11月26日 08:39/ 0 赞/ 201 阅读

相关 React篇(008)-react 生命周期函数

答案： react15生命周期 1. 初始化阶段： getDefaultProps: 获取实例的默认属性 getInitialState: 获取实例的初始化状态

古城微笑少年丶/ 2022年11月03日 00:55/ 0 赞/ 195 阅读

相关 React之生命周期函数

![70][] 一：Mounting 1：componentWillMount():在组件即将挂载在页面的时刻自动执行 2：render(): 3：componen

野性酷女/ 2022年05月21日 12:37/ 0 赞/ 200 阅读

相关 React生命周期函数

生命周期函数指在某一时刻组件会自动调用执行的函数 ![webp][] React生命周期挂载时的生命周期 componentWillMount // 在组件

野性酷女/ 2022年05月09日 07:03/ 0 赞/ 217 阅读

相关 react生命周期函数详解

react生命周期函数图详解 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

悠悠/ 2022年02月19日 18:20/ 0 赞/ 312 阅读

相关 React生命周期函数

相关函数 <table> <tbody> <tr> <td> <p>方法</p> </td> <td> <p>调用时机</p> </td>

矫情吗；*/ 2021年09月21日 23:14/ 0 赞/ 498 阅读

相关 react 生命周期函数有哪些

react 生命周期函数有哪些初始化 1.getDefaultProps() 注：getDefaultProps这种定义方式是用在你定义组件用的是React.creat...

朱雀/ 2020年07月01日 18:00/ 0 赞/ 753 阅读