React Native 组件生命周期演示demo

一、组件的属性(props)和状态(state)

参考：https://www.jianshu.com/p/72f8c1da0b65

1. 属性（props）

它是组件的不可变属性（组件自己不可以自己修改props）。
组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为节点的属性。
一般组件很少需要对外公开方法（例外：工具类的静态方法等），唯一的交互途径就是props。所以说它也是父组件与子组件通信的桥梁。
组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。

2. 状态（state）

它是组件的内部状态属性，主要用来存储组件自身需要的数据。
除了初始化时可能由props来决定，之后就完全由组件自身去维护。
组件中由系统定义了setState方法，每次调用setState时都会更新组件的状态，触发render方法重新渲染界面。
需要注意的是render方法是被异步调用的，这可以保证同步的多个setState方法只会触发一次render，这样做是有利于提高性能的。

二、组件的生命周期

React Native组件的生命周期见图1，https://blog.csdn.net/mikuoohash/article/details/79945801 此图来源于此。为了验证，自己写了一个Demo，顺序都是以warn 的形式显示。特别注意的是对于componentWillReceiveProps()验证，是在主组件设了一个定时器，改变一个属性，再传给子组件进行显示时，会调用子组件的componentWillReceiveProps()方法，可以看到warn显示了"one"。

App.js 文件：

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
import Greeting from './Greeting.js'

export default class HelloWorldApp extends Component {
  constructor(props) {
    super(props);
    console.warn("____constructor__");
    this.state = {
      firstName: "--firstName",
      lastName: "--lastName",
      count: 1,
      content:100,
    };
    this.ffff = "aaaa";
  }

  componentWillMount() {
    console.warn("___componentWillMount__");
  }

  render() {
    console.warn("___render__");
    console.warn(this.ffff);
    console.warn(this.state.count);
    return (
      <View>
        <Text
          onPress={() => {
            console.warn("点击了text");
            this.ffff = "ffff改变了";
            this.setState({
              count: this.state.count + 1
            });
          }}
          style={styles.click}
        >
          点击计数会增加1
        </Text>
        <Greeting content = {this.state.content}/>
        <Text style={styles.red}>{this.state.firstName}</Text>
      </View>
    );
  }

  //这个函数也是只被调用一次，这个函数之后，就进入了稳定的运行状态，等待事件触发。
  componentDidMount() {
    console.warn("--componentDidMount--");
    setTimeout(() => this.setState({content: 199}), 1000);
  }

  //状态更新的过程
  shouldComponentUpdate() {
    console.warn("--shouldComponentUpdate--");
    return true;
  }

  componentWillUpdate() {
    console.warn("--componentWillUpdate--");
  }

  //render

  componentDidUpdate() {
    console.warn("--componentDidUpdate--");
  }

  //组件关闭
  componentWillUnmount() {
    console.warn("--componentWillUnmount--");
    console.log("取消计时器网络请求等");
  }
}

const styles = StyleSheet.create({
  click: {
    backgroundColor: "green",
    marginTop: 50,
    width: 300,
    height: 50
  },
  red: {
    backgroundColor: "red",
    marginTop: 50,
    width: 300,
    height: 50,
    alignItems: "center"
  }
});

在Greeting.js：

import React, { Component } from "react";
import { Text, View, StyleSheet, Alert } from "react-native";
import PropTypes from "prop-types";

export default class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: props.content
    };
  }

  render() {
    return (
      <View style={{ alignItems: "center" }}>
        <Text style={styles.textStyle}>{"This is a text:" + this.state.text}</Text>
      </View>
    );
  }

 
  componentWillReceiveProps(nextProps) {
    console.warn("one");
    if (nextProps.content !== this.props.content) {
      //属性改变了，重新刷新！！
      this.setState({text: nextProps.content});
    }
  }
}
const styles = StyleSheet.create({
  textStyle: {
    backgroundColor: "blue",
    marginTop: 10,
    width: 150,
    height: 40,
    alignItems: "center"
  }
});

效果图如下所示：

这就是今天的一点点收获，很多都还没理解，有待继续加强。

这篇文章不错：https://www.jianshu.com/p/72f8c1da0b65，很感谢！