React Native class组件生命周期

React Native框架定义了一系列回调函数，用于在 class 组件的不同生命周期阶段执行特定的操作

constructor()

constructor 构造方法常用来初始化state，是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。

当存在constructor的时候必须手动调用super方法。如果在constructor中想使用this关键字，就必须先调用super方法。在constructor中如果要访问this.props需要在super中传入props。

但是无论有没有定义constructor，super是否传入props参数，在react的其他生命周期中this.props都是可以使用的，这是react自动附带的。

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            list: this.props.List
        };
        this.state.list = []; //修改state
        setTimeout(() => {
          this.setState({list: [1, 2, 3]}); //异步操作后 setState 触发渲染
        }, 100);
    }
}

render()

渲染组件，虚拟dom，在这里面实现组件的具体内容。需要注意的是不要在render里面setState，否则会触发死循环导致栈溢出。

render() {
    console.log(`render`);
    const { name, age, level, sex } = this.props;
    const { address } = this.state;
    return (
      <View style=>
        <Text style=>
          {`name=${name}, age=${age}, level=${level}, sex=${sex}`}
        </Text>
        <Text style=>
          {`${address}`}
        </Text>
      </View>
    );
  }

componentDidMount()

componentDidMount 在组件成功挂载到DOM之后立即执行，且全局只调用一次。可以在这里进行一些需要在DOM上进行的操作，例如更新UI或启动定时器等

componentDidMount() {
  this.startTimer();
}

shouldComponentUpdate()

shouldComponentUpdate 在组件即将更新时被调用。如果返回false,则表示不需要更新组件，否则会继续更新。通常在这个方法中进行一些高效的优化操作，例如避免重复计算或减少不必要的渲染

shouldComponentUpdate(nextProps, nextState) {
  return nextState !== this.state;
}

componentDidUpdate()

componentDidUpdate 方法在组件更新完成后被调用。可以在这里进行一些需要在DOM上进行的操作，例如更新UI或启动定时器等。但是需要注意的是，这个方法只会在实际更新完成后才会被调用，而不是每次都调用。因此，如果只需要进行一些简单的操作，可以使用其他生命周期方法代替该方法

componentDidUpdate() {
  // do something here after update completed successfully
}

getSnapshotBeforeUpdate(prevProps, prevState)

react native v16.3 之后新增的该方法
参数：
- props 组件接收到的新的props
- prevState 组件当前的状态
用户需要在这个函数中返回一个对象,它将作为setStat中的Updater来更新组件
当组件实例化的时候，这个方法替代了componentWillMount, 而当接收到新的props时，该方法替代了componentWillReceiveProps 和 componentWillUpdate
触发时机：会在每次组件被重新渲染前被调用,所以在父组件更新、props变化、组件内部执行了 setState 都会触发该方法

// Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate.
// Useful for saving things such as scroll position before render causes changes to it.
// Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.
getSnapshotBeforeUpdate(prevProps, prevState) {
  //  do something...
}

componentWillUnmount()

componentWillUnmount 在组件即将被卸载时调用，一般在componentDidMount里面注册的事件（比如addEventListener）需要在这里清除掉。

componentWillUnmount() {
	console.log(`componentWillUnmount`);
}

class组件生命周期