React Native 学习－组件说明和生命周期

组件的详细说明（Component Specifications）

当经过调用 React.createClass() 来建立组件的时候，你应该提供一个包含 render 方法的对象，而且也能够包含其它的在这里描述的生命周期方法。

如图，能够把组件生命周期大体分为三个阶段：

• 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
• 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件能够处理用户交互，或者接收事件更新界面；
• 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里作一些组件的清理工做。

render

ReactComponent render() 

render() 方法是必须的。

当调用的时候，会检测 this.props 和 this.state，返回一个单子级组件。该子级组件能够是虚拟的本地 DOM 组件（好比 <div /> 或者 React.DOM.div()），也能够是自定义的复合组件。

你也能够返回 null 或者 false 来代表不须要渲染任何东西。实际上，React 渲染一个<noscript> 标签来处理当前的差别检查逻辑。当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。

render() 函数应该是纯粹的，也就是说该函数不修改组件 state，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如经过使用 setTimeout）。若是须要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中作这件事。保持render() 纯粹，能够使服务器端渲染更加切实可行，也使组件更容易被理解。

getInitialState

object getInitialState() 

在组件挂载以前调用一次。返回值将会做为 this.state 的初始值。

getDefaultProps

object getDefaultProps() 

在组件类建立的时候调用一次，而后返回值被缓存下来。若是父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。

该方法在任何实例建立以前调用，所以不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每一个实例拥有一份拷贝。

propTypes

object propTypes 

propTypes 对象容许验证传入到组件的 props。更多关于 propTypes 的信息，参考可重用的组件。

mixins

array mixins 

mixin 数组容许使用混合来在多个组件之间共享行为。更多关于混合的信息，参考可重用的组件。

statics

object statics 

statics 对象容许你定义静态的方法，这些静态的方法能够在组件类上调用。例如：

var MyComponent = React.createClass({ statics: { customMethod: function(foo) { return foo === 'bar'; } }, render: function() { } }); MyComponent.customMethod('bar'); // true 

在这个块儿里面定义的方法都是静态的，意味着你能够在任何组件实例建立以前调用它们，这些方法不能获取组件的 props 和 state。若是你想在静态方法中检查 props 的值，在调用处把 props 做为参数传入到静态方法。

displayName

string displayName 

displayName 字符串用于输出调试信息。JSX 自动设置该值；参考JSX 深刻。

生命周期方法

许多方法在组件生命周期中某个肯定的时间点执行。

挂载： componentWillMount

componentWillMount() 

服务器端和客户端都只调用一次，在初始化渲染执行以前马上调用。若是在这个方法内调用setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

挂载： componentDidMount

componentDidMount() 

在初始化渲染执行以后马上调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展示，你能够经过 this.getDOMNode() 来获取相应 DOM 节点。

若是想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，能够在该方法中执行这些操做。

注意：

为了兼容 v0.9，DOM 节点做为最后一个参数传入。你依然能够经过this.getDOMNode() 获取 DOM 节点。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps) 

在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。

用此函数能够做为 react 在 prop 传入以后， render() 渲染以前更新 state 的机会。老的 props 能够经过 this.props 获取到。在该函数中调用 this.setState() 将不会引发第二次渲染。

componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); } 

注意：

对于 state，没有类似的方法： componentWillReceiveState。将要传进来的 prop 可能会引发 state 改变，反之则否则。若是须要在 state 改变的时候执行一些操做，请使用 componentWillUpdate。

更新： shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState) 

在接收到新的 props 或者 state，将要渲染以前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。

若是肯定新的 props 和 state 不会致使组件更新，则此处应该 返回 false。

shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; } 

若是 shouldComponentUpdate 返回 false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）

默认状况下，shouldComponentUpdate 总会返回 true，在 state 改变的时候避免细微的 bug，可是若是老是当心地把 state 当作不可变的，在 render() 中只从 props 和state 读取值，此时你能够覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。

若是性能是个瓶颈，尤为是有几十个甚至上百个组件的时候，使用shouldComponentUpdate 能够提高应用的性能。

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState) 

在接收到新的 props 或者 state 以前马上调用。在初始化渲染的时候该方法不会被调用。

使用该方法作一些更新以前的准备工做。

注意：

你不能在刚方法中使用 this.setState()。若是须要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState) 

在组件的更新已经同步到 DOM 中以后马上被调用。该方法不会在初始化渲染的时候调用。

使用该方法能够在组件更新以后操做 DOM 元素。

注意：

为了兼容 v0.9，DOM 节点会做为最后一个参数传入。若是使用这个方法，你仍然能够使用 this.getDOMNode() 来访问 DOM 节点。

移除： componentWillUnmount

componentWillUnmount() 

在组件从 DOM 中移除的时候马上被调用。

在该方法中执行任何须要的清理，好比无效的定时器，或者清除在 componentDidMount 中建立的 DOM 元素。