React生命周期

作者: 葶寳寳 | 来源:发表于2017-08-10 17:44 被阅读120次

React生命周期主要经历四个阶段:创建阶段,实例化阶段,和更新阶段。

创建阶段

主要发生在创建组件类时,即调用React.createClass时触发。

该阶段只会触发一个getDefaultProps方法,该方法返回一个对象并缓存起来。然后与父组件指定的props对象合并,最后赋值给this.props作为该组件的默认值。

props属性特征:
它只是一个对象,是组件用来接受外面传来的参数的;
组件内部是不允许修改props属性的,只能通过父组件来修改。

实例化阶段

主要发生在实例化组件类的时候,也就是该组件类被调用的时候触发。该阶段触发的一系列流程执行顺序如下:

1.getInitialState:初始化state值。返回值赋值给组件的this.state

  • getInitialState中可以访问组件的props
  • 每个组件都有自己的state,它与props的区别在于state只存在组件的内部,props在所有实例中共享。、
  • getInitialStategetDefaultProps的调用是有区别的。getDefaultProps是对于组件类来说只调用一次,而getInitialState是对于每个组件实例来讲都会调用,且只调用一次。

2.componentWillMount:根据业务逻辑对state进行相应的操作。也就是在render方法调用之前,修改state的最后一次机会。

3.render:根据state的值,生成页面需要的虚拟DOM结构,并返回该结构。生命周期唯一一个必须的方法。该方法满足以下条件:

  • 只能通过this.propsthis.state访问数据。(不能修改)
  • 可以返回nullfalse或者任何React组件。
  • 只能出现一个顶级组件,不能返回一组元素。
  • 不能修改组件的状态。
  • 不能修改DOM的输出。

4.componentDidMount:对根据虚拟DOM而生的真实DOM进行相应的处理。组件内部可以通过ReactDOM.findDOMNode(this)来获取当前组件的结点,然后可以像Web开发中操作DOM了。

  • 该方法不会在服务端被渲染的过程中调用。

  • 可以在该方法中执行setTimeoutsetInterval或发送Ajax请求等。

更新阶段

主要发生在用户操作之后或父组件有更新时,会出发一系列的流程,执行顺序如下:

1.componentWillReceiveProps:有一个参数nextProps。当组件接收到新的props时,会触发该函数。在该函数中,可以通过调用setState更新state(接收到新的props会触发一次render,调用this.setState也会触发一次render,但在componentWillReceiveProps中调用this.setState,React会把原本需要的两次render合并成一次)。也可以通过判断nextProps值,做出相应的操作。

2.shouldComponentUpdate:返回一个布尔值。在组件接收到新的propsstate时被执行,可以根据事先定好的判断逻辑,做出最后要不要更新组件的决定。返回false时,则不会执行render以及后面的componentWillUpdatecomponentDidUpdate方法。默认返回true

可以运用这个函数来提升应用速度。

3.componentWillUpdate:接受两个参数:object nextPropsobject nextState。在组件接收到新的propsstate,但还没有render时被执行。

当上边的方法返回true时,就可以在该方法中做一些更新前的操作。

不建议在该方法中再去个更新propsstate

4.render:根据一系列的diff算法,生成需要的虚拟DOM数据。

5.componentDidUpdate:接受两个参数:object prevPropsobject prevState。与componentDidMount类似,在组件被重新渲染之后被调用。可以在这里访问并修改DOM

销毁阶段

只会触发一个componentWillUnmount方法。

每当React组件使用完一个组件时,该组件必须从DOM中卸载后被销毁,此时componentWillUnmount会被执行,完成所有的清理和销毁工作,在 componentDidMount中添加的任务都需要在该方法中撤销,如创建的定时器或时间监听器。

相关文章

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React生命周期

    React v16.0前的生命周期 React v16.4+ 的生命周期图 React v16.9后这些生命周期钩...

  • React v16 生命周期

    React 16 生命周期 React 16.3 新增的生命周期方法 逐渐废弃的生命周期方法: 一般将生命周期分成...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react/vue常见问题整理

    一、react 1. react生命周期 react 16生命周期相对于15的变化:componentWillMo...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • 《深入React技术栈》学习笔记Ⅲ

    以下的生命周期都是在 React 15 的生命周期, React 16 的生命周期 API 已经发生变化。Reac...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

网友评论

本文标题:React生命周期

本文链接:https://www.haomeiwen.com/subject/tbbhrxtx.html