美文网首页
React 组件生命周期

React 组件生命周期

作者: lyzaijs | 来源:发表于2016-03-31 14:48 被阅读2080次

组件生命周期

参考阅读:

  1. component-lifecycle
  2. react组件生命周期过程说明
  3. react 组件生命周期 图文

组件的生命周期包含三个主要部分:
挂载: 组件被插入到DOM中。
更新: 组件被重新渲染,查明DOM是否应该刷新。
移除: 组件从DOM中移除。

React提供生命周期方法,你可以在这些方法中放入自己的代码。我们提供will方法,会在某些行为发生之前调用,和did方法,会在某些行为发生之后调用。

挂载

  • getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法,返回初始的state数据。
  • componentWillMount()在挂载发生之前立即被调用。
  • render()
  • componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。

更新

  • componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps,然后使用this.setState()来改变state。
  • shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数,优化this.props和nextProps,以及this.state和nextState的比较,如果不需要React更新DOM,则返回false。
  • componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。
  • componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。

移除

  • componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。

挂载的方法(Mounted Methods)

  • getDOMNode(): DOMElement可以在任何挂载的组件上面调用,用于获取一个指向它的渲染DOM节点的引用。
  • forceUpdate()当你知道一些很深的组件state已经改变了的时候,可以在该组件上面调用,而不是使用this.setState()。

相关文章

  • React概念图

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

  • React 组件生命周期

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

  • React总结

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

  • 学习并实现react (4)

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

  • react(最近搞了一套react项目的视频 全套 有需

    React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mou...

  • Notes On React - Two

    React 的生命周期   React组件 的生命周期大致可分成四个状态:  - Mounting:装配-组件实例...

  • React 生命周期

    React 生命周期 初始化周期 组件重新渲染生命周期 组件卸载生命周期

  • 006@React组件的生命周期.md

    006@React组件的生命周期.md React Native 是基于组件化开发。弄清楚组件的生命周期对于我们开...

  • 四:React 进阶三 (生命周期)

    react(一):组件的生命周期 生命周期函数 在组件运行的某个时刻,会被自动执行的一些函数。 React生命周期...

  • react组件的生命周期

    第三单元(react组件的生命周期) 课程目标 灵活掌握react组件的生命周期以及组件的活动过程。 能够灵活使用...

网友评论

      本文标题:React 组件生命周期

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