React Native学习笔记三组件生命周期

在React Native中使用组件来封装界面模块时，整个界面就是一个大的组件，开发过程就是不断优化和拆分界面组件、构造整个组件树的过程。
1.组件的属性

props:它是组件的不可变属性。组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。一般组件很少需要对外公开方法，唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。
下面举一个简单的例子来说明props。
有一个父组件Menu和一个子组件MyListView。

class Menu extends Component {
constructor() {
    super();
    this.state = {
      data: 'react native 组件生命周期学习',}
  }
  render() {
    /* 返回一个根组件*/
    return (
      <MyListView
        data = {this.state.data}
      />
    );
  }
}

子组件MyListView的定义如下：

class MyListView extends Component {
  props: {
    data: String,}
  render() {
    return (
      <View>
         <Text>{this.props.data} </Text>
      </View>
    );
  }
}

在上面的代码片段中，MyListView有一个props属性成员data。在父组件Menu中，通过节点属性的方式传值给子组件。

state:它是组件的内部状态属性，主要用来存储组件自身需要的数据。除了初始化时可能由props来决定，之后就完全由组件自身去维护。组件中由系统定义了setState方法，每次调用时都会更新组件的状态，触发render方法。需要注意的是render方法是被异步调用的，这可以保证同步的多个setState方法只会触发一次render，这样做是有利于提高性能的。
下面利用一个代码片段示例来说明state属性。先说一下需求：点击一下图片，实现计数的加一操作。

class ListItem extends Component {
  state: {
    /* 点赞数*/
    likeNum: number,}

  componentWillMount() {
    this.state = {
      likeNum: 0,}
  }

  render() {
    return (
        <View >
          <TouchableHighlight onPress = {() => this._onPressImage(this.state.likeNum)}>
            <Image
               source = {require('./img/hand@2x.png')}
              />
          </TouchableHighlight>
          <Text > {this.state.likeNum}</Text>
        </View>
      );
  }
  _onPressImage(likeNumd: number) {
    this.setState({
      likeNum: (likeNumd + 1),});
  }
}

在这个代码片段中，定义了一个state属性(likeNum)。当点击Image的时候，触发了_onPressImage方法。在该方法中通过调用系统的setState方法修改state的值。当修改完以后，系统就会自动触发render方法，从而完成界面的重新渲染。
2.组件的生命周期
对于自定义组件，除了必须实现的render方法，还有一些其他的可选方法可被调用。这些方法会在组件的不同时期之行，所以也可以说这些方法是组件的生命周期方法。
对于组件的生命周期来说一般分为四个阶段：分别为：创建阶段、实例化阶段、更新阶段、销毁阶段。
下面分别说一下这四个阶段。

创建阶段
该阶段主要发生在创建组件类的时候，在这个阶段中会初始化组件的属性类型和默认属性。
在ES5中会触发getDefault这个生命周期方法，每次创建组件的时候执行且只执行一次。在ES6中可以统一使用static成员来实现。代码示例如下：

static defaultProps = {
    iconName: '',}; 
  static propTypes = {
    iconName: React.PropTypes.string.isRequired,};

实例化阶段
该阶段主要发生在组件类被调用(实例化)的时候。
组件类被实例化的时候，触发一系列流程：
1）getInitialState。在这里可以初始化state的值;在ES6中我们也可以将初始化state的操作放在constructor构造方法中去做；
2）componentWillMount()。在组件渲染之前调用。在这个方法中根据业务逻辑对state进行操作;
3）render()。根据state的值，生成对应虚拟DOM结构。并返回该结构;
4）componentDidMount()。虚拟DOM转为真实DOM。组件内部可以通过一个this.getDOMNode()来获取当前组件节点。
更新阶段
该阶段主要发生在用户操作之后，或者父组件有更新的时候，此时会根据用户的操作行为，进行相应的界面结构调整。触发的流程如下：
1）componentWillReceiveProps。当组件接收到新的props时，会触发该函数。在该函数中，通常可以调用setState()来完成对state的修改。
2）shouldComponentUpdate。可以拦截新的props或state，决定要不要更新组件。
3）componentWillUpdate。在更新之前做一些操作。
4） render。根据diff算法，生成需要更新的虚拟DOM数据。
5） componentDidUpdate。虚拟DOM同步到DOM中后，执行该方法，可以在这个方法中做DOM操作。
销毁阶段
该阶段主要发生组件销亡的时候，触发componentWillUnmount。当组件需要从DOM中移除的时候，通常需要做一些取消事件绑定，移除虚拟DOM中对应的组件数据结构，销毁一些无效的定时器等工作，都可以在这个方法中处理。
下面借鉴一个说明组件生命周期的比较清晰的图

图片来源：http://www.race604.com/react-native-component-lifecycle/?utm_source=tuicool&utm_medium=referral

React Native学习笔记三组件生命周期

相关推荐