ReactNative学习七-组件说明和生命周期
组件的详细说明(Component Specifications) 当通过调用 renderReactComponent render()
当调用的时候,会检测 你也可以返回 render()函数应该是纯粹的,也就是说该函数不修改组件 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用 getInitialStateobject getInitialState()
在组件挂载之前调用一次。返回值将会作为 getDefaultPropsobject getDefaultProps()
在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 该方法在任何实例创建之前调用,因此不能依赖于 propTypesobject propTypes
propTypes对象允许验证传入到组件的 props。更多关于 mixinsarray mixins
mixin数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息,参考 statics object statics
statics对象允许你定义静态的方法,这些静态的方法可以在组件类上调用。例如: var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
renderfunction() {
}
});
MyComponent.customMethod('bar'); // true
在这个块儿里面定义的方法都是静态的,意味着你可以在任何组件实例创建之前调用它们,这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值,在调用处把 props 作为参数传入到静态方法。 displayNamestring displayName
displayName字符串用于输出调试信息。JSX 自动设置该值;参考JSX 深入。 生命周期方法许多方法在组件生命周期中某个确定的时间点执行。 挂载: componentWillMountcomponentWillMount()
服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用 挂载: componentDidMountcomponentDidMount()
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。在生命周期中的这个时间点,组件拥有一个 DOM 展现,你可以通过 如果想和其它 JavaScript 框架集成,使用
更新: componentWillReceivePropscomponentWillReceiveProps(object nextProps)
在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。 用此函数可以作为 react 在 prop 传入之后, componentWillReceivePropsfunction(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
更新: shouldComponentUpdateboolean shouldComponentUpdate(object nextProps, object nextState)
在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 如果确定新的 props 和 state 不会导致组件更新,则此处应该 shouldComponentUpdatefunction(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
如果 默认情况下, 如果性能是个瓶颈,尤其是有几十个甚至上百个组件的时候,使用 更新: componentWillUpdatecomponentWillUpdate(object nextProps,249)"> 在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
|