什么是react生命周期

React组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载这几个阶段,当渲染后的组件需要更新的时候,我们会重新去渲染组件,直到卸载。

1.生命周期总览

react的生命周期大概分为

● 组件装载(Mount)组件第一次渲染到Dom树

● 组件更新(update)组件state,props变化引发的重新渲染

● 组件卸载(Unmount)组件从Dom树删除

2.组件装载过程

● constructor: 在此初始化state,绑定成员函数this环境,props本地化

● componentWillMount: 预装载函数,不能进行修改state的操作,即使做了,也不会进行新数据状态的渲染。在该函数中做的操作,都可以提前到构造函数中。

● render: 渲染函数,唯一的一定不能省略的函数,必须有返回值,返回null或false表示不渲染任何DOM元素。它是一个仅仅用于渲染的纯函数,返回值完全取决于this.statethis.props,不能在函数中任何修改props、state、拉取数据等具有副作用的操作。render函数返回的是JSX的对象,该函数并不因为这渲染到DOM树,何时进行真正的渲染是有React库决定的。(setState是一个异步函数)

● componentDidMount: 挂载成功函数。该函数不会再render函数调用完成之后立即调用,因为render函数仅仅是返回了JSX的对象,并没有立即挂载到DOM树上,而componentDidMount是在组件被渲染到DOM树之后被调用的。另外,componentDidMount函数在进行服务器端渲染时不会被调用。

3.组件更新过程

当组件挂载到DOM树上之后,props/state被修改会导致组件进行更新操作。更新过程会以此调用如下的生命周期函数:

● componentWillReceiveProps(nextProps): 该函数在组件进行更新以及父组件render函数(不管数据是否发生了改变)被调用后执行,this.props取得当前的props,nextProps传入的是要更新的props。通常是比较this.props和nextProps来重新setState。

● shouldComponentUpdate(nextProps, nextState): 返回bool值,true表示要更新,false表示不更新,使用得当将大大提高React组件的性能,避免不需要的渲染。

● componentWillUpdate: 预更新函数。

● render: 渲染函数。

● componentDidUpdate: 更新完成函数。 相比装载过程的生命周期函数,更新过程的生命周期函数使用的相对来说要少一些。常用的是componentWillReceiveProps、componentShouldUpdate,前者经常用于根据前后两个数据去设置组件的状态,而后者则是常用于优化,避免不必要的渲染。

4.组件卸载过程

卸载过程只涉及一个函数componentWillUnmount,当React组件要从DOM树上删除前,会调用一次这个函数。这个函数经常用于去除componentDidMount函数带来的副作用,例如清除计时器、删除componentDidMount中创造的非React元素。

5.注意事项

setState

要修改state,只能使用this.setState(),不能使用this.state.value='myData' 类似方式设置state,一是不会驱动重新渲染,二是很可能被后面的操作替换,造成无法预知的错误。此外,React利用状态队列来实现setState的异步更新,避免频繁地重复更新state。当同时做了很多setState操作的时候,react会智能的合并成一个setState,当需要确定的setState完成后的操作,可以使用

setState({}, () => {
// 在这里进行state改变后的操作
})

setState的调用是有风险的,在某些生命周期函数中调用可能会无用甚至早恒循环调用导致崩溃。state的初始化一般在构造函数中实现;setState可以在装载过程的componentWillMount、componentDidMount中调用;setState可以在更新过程中的componentWillReceiveProps、componentDidUpdate中调用

render

render是一个异步函数,render执行后并不会直接生成Dom,而是生成虚拟Dom节点(模拟HTML Dom节点的一个javaScript数据结构),何时生成真实的DOM树取决于react框架本身的计算

本文来自React答疑栏目,欢迎学习!

以上就是什么是react生命周期的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏