React Native填坑之旅--组件生命周期

此次咱们来填React Native生命周期的坑。这一点很是重要,须要有一个清晰的认识。若是你了解Android或者iOS的话,你会很是熟悉咱们今天要说的的内容。this

基本上一个React Native的组件会经历三个阶段最终渲染在界面上,他们分别是:开始渲染、更新、卸载。code

开始渲染:

componentWillMount

componentWillMount(): void

组件开始渲染的时候调用这个方法component

componentDidMount

componentDidMount(): void

组件的渲染完成以后调用这个方法。子组件的componentDidMount方法会在父组件的前面调用。componentWillMountcomponentDidMount方法以前调用,这个时候组件尚未渲染完成。因此在componentWillMount里调用setState方法会马上在render方法里看到更新了的数据。生命周期

更新

componentWillReceiveProps

componentWillReceiveProps(nextProps: Object): void

当有新的Props发送给组件的时候,这个方法被触发。最开始的render并不会调用这个方法! 使用这个方法能够在更新state,render方法被调用以前修改组件的props。在这个方法里可使用this.props来使用旧的props。在这个方法里调用setState方法不会触发额外的render。开发

例如:class

componentWillReceiveProps(nextProps) {
  this.setState({
    currentCategory: nextProps.category !== this.props.category
                      ? nextProps.category
                      : this.props.category
  });
}

shouldComponentUpdate

shouldComponentUpdate(nextProps: Object, nextState: Object): void

当收到新的props或者state的时候触发这个方法。默认状况下shouldComponentUpdate一直返回true。这个方法在第一次render的时候不会调用。当你肯定props和state被设置为新的值之后不须要组件更新的时候返回false。以后render方法在本次的更新中就会被直接跳过,componentWillUpdatecomponentDidUpdate两个方法也不会被调用。渲染

componentWillUpdate

componentWillUpdate(nextProps: Object, nextState: Object): void

在props或者state更新以后当即调用这个方法。这个方法不会在第一次render的时候调用。date

render

render(): ReactElement<{}>

render方法被调用的时候,组件会根据新的this.propsthis.state绘制。render方法应该是一个纯方法。也就是说,它不修改组件的state,而且每次调用都返回相同的结果。固然,这个须要开发者来保证。方法

componentDidUpdate

componentDidUpdate(prevProps: Object, prevState: Object): void

每次组件更新以后调用。第一次render的时候不会调用。next

卸载

componentWillUnmount(): void

组件被卸载以后调用。能够在这个方法里执行一些清理操做。

相关文章
相关标签/搜索