博客
关于我
React 生命周期函数
阅读量:628 次
发布时间:2019-03-13

本文共 775 字,大约阅读时间需要 2 分钟。

一、初始化

在这个阶段,组件会设置自己的属性(props)和状态(state)。开发者通常会在这里初始化内部的数据源、事件处理器等。

二、安装

从React 16.3版本开始,componentWillMount 已经被列为不安全的方法。开发者可以通过在方法名前加上 UNSAFE_ 来维持兼容性。

已废除 的方法包括:

- componentWillMount:在组件将要挂载到页面时执行。 - componentWillReceiveProps:在组件第一次存在于 DOM 中时不会执行,但在二次渲染时会生效。 - componentWillUpdate:在 shouldComponentUpdate 之后执行。

%p> render 是组件挂载时(包括初次和次次渲染)的入口方法。

%p> componentDidMount:在组件完全挂载之后执行,适合进行初始化操作。

三、更新

在这阶段,组件会根据 props 或 state 的变化重新渲染。需要注意的是,componentWillReceiveProps 已经被废弃,建议使用 UNSAFE_ 前缀来使用这些方法。以下是相关步骤:

- componentWillReceiveProps:在组件已存在于 DOM 中时会执行。 - shouldComponentUpdate:在组件更新之前调用,用于控制是否渲染(建议返回 true 进行更新)。 - componentWillUpdate:在 shouldComponentUpdate 之后调用。 - render:渲染操作。 - componentDidUpdate:在组件更新完成后调用,适合执行在更新后需要的逻辑。

四、卸载

componentWillUnmount:当组件将被移除时会自动执行,用于释放资源或清理事件监听器。

转载地址:http://sapaz.baihongyu.com/

你可能感兴趣的文章
numpy数组索引-ChatGPT4o作答
查看>>
numpy最大值和最大值索引
查看>>
NUMPY矢量化np.prod不能构造具有超过32个操作数的ufunc
查看>>
Numpy矩阵与通用函数
查看>>
numpy绘制热力图
查看>>
numpy转PIL 报错TypeError: Cannot handle this data type
查看>>
Numpy闯关100题,我闯了95关,你呢?
查看>>
nump模块
查看>>
Nutch + solr 这个配合不错哦
查看>>
NuttX 构建系统
查看>>
NutUI:京东风格的轻量级 Vue 组件库
查看>>