美文网首页前端开发
React组件的生命周期

React组件的生命周期

作者: mayunyun | 来源:发表于2017-11-15 16:49 被阅读3次

React组件生命周期
4个阶段:创建阶段、实例化阶段、更新阶段、销毁阶段

【创建阶段】
● getDefaultProps 只在组件创建时调用一次并缓存返回的对象(即在 React.createClass 之后就会调用)
【实例化阶段】
● getInitialState 初始化组件的state值。会赋值给组件的 this.state,只在组件装载之前调用一次;
● componentWillMount [渲染完成之前] 根据业务逻辑来对state进行相应的操作,只会在渲染前调用一次,render 之前调用;
● render 组装生成这个组件的 HTML 结构,这个函数是用来渲染DOM
● componentDidMount [渲染完成之后] 只在第一次渲染完成之后才会调用,只会调用一次,render 之后调用;

  [到此处,项目已经正常运行了,组件通过 ReactDOM.findDOMNode(this)能获取当前组件的节点]

【更新阶段】
● componentWillReceiveProps 当组件接收到新的 props时,会触发 (nextProps): 可以拿到即将改变的状态
● shouldComponentUpdate : 在组件接收到新的props或者state时被调用。该方法用来拦截新的 props或 state,然后根据事先设定好的判断逻辑,做出最后要不要更新组件的决定;在初始化时或者使用forceUpdate时不被调用。
● componentWillUpdate():当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作;在这个函数内你不能调用setState改变组件状态
● componentDidUpdate(): 和 componentDidMount 类似,在组件的更新已经同步到 DOM 中去后触发,在这里执行DOM操作以及发起网络请求
【销毁阶段】
● componentWillUnmount 卸载组件触发,进行取消事件绑定、移除虚拟DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。

React生命周期.png

相关文章

  • 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:装配-组件实例...

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

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

  • React 生命周期

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

  • react组件的生命周期

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

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

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

网友评论

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

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