react组件生命周期有几个阶段?

本教程操作环境:windows10系统、react16版,该方法适用于所有品牌电脑。

react组件生命周期

React组件生命周期有三个阶段:加载、更新和卸载。每个阶段有多个方法来调用实现某些功能。这些方法名字也很有意思,带will前缀表示在该阶段发生之前调用,did表示在该阶段发生之后调用。本文将介绍这些方法。本文翻译自React官网文档,如有翻译不当,请不吝指正。

1、Mounting阶段

该阶段表示一个组件实例被创建并被插入到DOM中。该阶段有四个方法:constructor()componentWillMount()render()componentDidMount()

  • constructor(props):该方法在组件加载前调用。当组件作为React.Component的子类实现时需要在其他声明之前先调用super(props)。否则,this.props在构造器中会是undefined,这会导致代码出现bug。
    作用:用来初始化状态,如果既不初始化状态也不绑定方法,那就没必要实现该方法了。(笔者注:事实上,如果组件没有构造器方法的话,组件会默认调用一个构造器,实现属性的传递)。
  • componentWillMount():该方法会在加载发生前调用。因为它发生在render()方法前,因此在该方法内同步设置状态不会引发重渲染。该方法还是服务器端渲染的唯一的生命周期钩子。一般,推荐用constructor()代替该方法。
  • render():该方法必须要有。当调用时,它会检查this.propsthis.state,然后返回一个React元素。这个元素可以是原生DOM组件如p,也可以是一个自定义的复合组件。如果什么也不想渲染的话,可以返回nullfalse。当返回nullfalse时,ReactDOM.findDOMNode(this)会返回null。该方法应该是纯净的,这意味着它不能修改组件状态,每次调用会返回相同的结果,不会和浏览器发生直接的交互。如果想要同浏览器发生交互的话,应该在componentDidMount()中实现。
  • componentDidMount():组件加载完成后触发。
    作用:放置必要的DOM节点。如果要从远程节点加载数据,这是一个不错的实例化网络请求的地方。也可以在此处设置定时器等。
    注意:在该方法内设置状态会导致重渲染。

2、Updating阶段:

该阶段表示由状态或属性的改变导致组件的重渲染。该阶段有五个方法:componentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()

  • componentWillReceiveProps(nextProps):该方法会在加载好的组件在收到新的状态后调用。如果需要更新状态以反映属性的改变,可以在比较this.propsnextProps后,使用this.setState()方法来实现状态的过渡。
    注意:React可能会在props值并未改变的时候调用该方法,所以要确保每次处理改变时都要比较当前props和收到的props值。这可能发生在父组件导致该组件重渲染时。
    非触发时期:mounting阶段不会调用该方法。只有在部分props属性更新时调用该方法,另外调用this.state()不会触发该方法。
  • shouldComponentUpdate(nextProps, nextState):该方法用来告诉React,组件输出是否受到当前状态或属性的影响。默认情况下,每次状态改变都会导致重渲染,在大多数情况下,你只需保持该默认行为即可。该方法在收到新的props或state时会被调用,且调用是在重渲染前。该方法默认返回true。但返回false不会影响其子组件在状态改变时的重渲染。
    非触发时期:初次渲染或使用forceUpdate()时不会调用该方法。
    注意:就目前而言,如果该方法返回false,以后的componentWillUpdate()render()componentDidUpdate()都不会再调用了。但未来可能该方法返回的结果只是作为暗示,而非指令,返回false可能仍会导致重新渲染。
    最后,如果找到了导致性能低下的组件,可以使它继承React.PureComponent。该组件用props和state的浅比较实现了shouldComponentUpdate()。也可以自己实现该方法,通过this.propsnextProps比较,this.statenextState比较,然后返回false以跳过更新。
  • componentWillUpdate():该方法在收到新属性和状态渲染前调用。可以用它来做更新前的准备工作。
    注意:该方法不可以调用this.setState()。如果需要更新状态以响应属性的改变,使用componentWillReceiveProps(nextProps)代替。
    非触发时期:初次渲染不会调用该方法。shouldComponentUpdate()返回false不会调用该方法。
  • render():该方法是mount和update阶段都会使用到的方法,解释同mount阶段的render()
    非触发时期shouldComponentUpdate()返回false不会调用该方法。
  • componentDidUpdate(prevProps, prevState):更新发生后会立即调用该方法。可用来在组件更新后操作DOM。另外,也可以通过比较当前属性和之前属性来决定是否发送网络请求(如,状态未改变不需要做网络请求)。
    非触发时期:初次渲染不会调用该方法。shouldComponentUpdate()返回false不会调用该方法。

3、Unmounting阶段:

该阶段表示组件从DOM中移除。该阶段只有一个方法:componentWillUnmount()

  • componentWillUnmount():该方法会在组件被销毁前立即调用。
    作用:可以在方法内实现一些清理工作,如清除定时器,取消网络请求或者是清理其他在componentDidMount()方法内创建的DOM元素。

以上就是react组件生命周期有几个阶段?的详细内容,更多请关注html中文网其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏

1/1