React生命周期

2019-05-17  本文已影响0人  xdoer

React 生命周期

前言

React生命周期也是一个老生常谈的问题。项目上也是边摸索边用。

正文

在进行项目时,Vscode编辑器中打出 com 三个关键字,就可以编辑器联想到的所有生命周期类型什么的。看语义,我尝试使用 componentWillMountcomponentWillReceiveProps 两个生命周期函数。后来查了一下资料,也确实是用这两个函数,完成了我们大部分的需求。

componentWillMount顾名思义,组件加载前,这个阶段,我们一般进行接口请求的操作,请求结果数据保存在 model 中,使用 componentWillReceiveProps 函数就收返回,改变状态完成界面更新。

那除了这两个,其他也都需要了解一下,由此也有了这篇文章

首先生命周期主要分三个过程: Mounting(装载),Updating(更新),Unmounting(卸载)

每个组件都有几个 “生命周期方法” ,我们可以重写这些方法,以在过程中的特定时间运行代码。 前缀为 will 的方法在一些事情发生之前被调用,而前缀为 did 的方法在一些事情发生后被调用。

当Mounting发生的时候,以下函数先后触发

constructor()

componentWillMount()

render()

componentDidMount()

当Updating发生的时候,以下函数先后触发:

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

当Unmounting发生的时候,这个函数触发:

componentWillUnmount()
上一篇 下一篇

猜你喜欢

热点阅读