React 生命周期

刺骨的言语ヽ痛彻心扉 2022-10-02 06:52 319阅读 0赞

目录

React 生命周期图

一、生命周期路径一,初始化组件过程

1、getDefaultProps

2、getInitialState

3、componentWillMount

4、render(渲染)

5、componentDidMount

二、生命周期路径二,更新组件过程

更新组件常用的两种方式:

三、生命周期路径三,卸载组件过程


React 生命周期图

图是盗的,可以分为 1、 2、 3 部分过程。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3J1YW5oYW8xMjAz_size_16_color_FFFFFF_t_70

一、生命周期路径一,初始化组件过程

  1. 可以参考:[https://www.runoob.com/try/try.php?filename=try\_react\_life\_cycle2][https_www.runoob.com_try_try.php_filename_try_react_life_cycle2]

1、getDefaultProps

这是由外部传入数据的阶段,也可以不传,传入的数据途径:(1)connect数据到props;(2)父组件传入到子组件的props中。

2、getInitialState

这里保存的是组件内的状态,如果这个状态改变了,这个组件就会重新 render

3、componentWillMount

在渲染前调用

4、render(渲染)

渲染组件

5、componentDidMount

在组件第一次渲染后调用,之后组件就生成的真实的 DOM结构,可以通过this.getDOMNode()来进行访问。

这里主要可以做一些异步ajax数据加载,数据加载可以通过 更改组件内state 更新组件,也可以通过 props的方式从外部传入更新组件。

二、生命周期路径二,更新组件过程

更新组件常用的两种方式:

1、componentDidMount

这个方法内 通过ajax方式获取数据,更新组件内state,触发组件重新渲染。

2、父组件更新子组件的属性,传入到子组件的 props 的方式,子组件的 componentWillReceiveProps 方法接收到新的props,然后比对与旧的 props是否一致,如果不一致则更改组件内state,触发组件重新渲染。

两种方式都会更改组件内state,更改后路径如下:

1、触发 shouldComponentUpdate 方法

2、触发 componentWillUpdate

3、render

4、componentDidUpdate

三、生命周期路径三,卸载组件过程

卸载组件会触发 componentWillUnmount 方法,这个方法内可以做一些资源的释放工作。

发表评论

表情:
评论列表 (有 0 条评论,319人围观)

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

相关阅读

    相关 react生命周期

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

    相关 react生命周期

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

    相关 react生命周期

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