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

react 组件生命周期

作者: sherlock221b | 来源:发表于2015-06-09 22:50 被阅读5530次
Paste_Image.png

<p>
具体参考这篇文章:
http://www.race604.com/react-native-component-lifecycle/
<p>

render():

render 保持其 pure 特性(纯粹的渲染)

  1. 不修改组件state
  2. 不操作dom,浏览器交互

按照这样方式,可以使得服务端渲染可行,react-natve可行

getInitialState()

组件挂载之前调用一次 返回值为this.state的初始值

componentWillMount() 和 componentDidMount()

componentDidMount : 初始化渲染之后调用

通过 this.getDOMNode() 来获取相应 DOM 节点
可以发送ajax
与其他框架集成

componentWillMount : 初始化渲染之前调用

componentWillReceiveProps

在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
用此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

提示
Warning: Any use of a keyed object should be wrapped in React.addons.createFragment(object) before being passed as a child

生命周期demo gist:

https://gist.github.com/sherlock221/b1536d37d744912642ff

相关文章

  • 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/skljqttx.html