React Native 生命周期，【好文推荐，2024年大厂前端面经

React Native 组件的生命周期可以分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。

1. 挂载阶段：

   • constructor()：初始化状态。
   • static getDerivedStateFromProps()：静态方法，当组件接收到新的属性时调用，可返回一个对象作为新的状态。
   • render()：渲染虚拟 DOM。
   • componentDidMount()：组件挂载后调用，此时可以访问 DOM 节点。

2. 更新阶段：

   • static getDerivedStateFromProps()：再次接收新的属性时调用，返回更新状态的对象或 null。
   • shouldComponentUpdate()：判断是否需要更新组件，默认返回 true。
   • render()：生成新的虚拟 DOM。
   • getSnapshotBeforeUpdate()：更新前调用，返回一个值，作为 componentDidUpdate() 的第三个参数。
   • componentDidUpdate()：更新后调用。

3. 卸载阶段：

   • componentWillUnmount()：组件即将被卸载时调用，可以在此清理定时器、取消网络请求等。

下面是一个简单的生命周期示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  static getDerivedStateFromProps(props, state) {
    // 根据props更新state
  }
 
  componentDidMount() {
    // 组件挂载后的操作
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    // 根据条件判断是否需要更新组件
    return true;
  }
 
  componentWillUnmount() {
    // 组件即将卸载的操作
  }
 
  render() {
    return (
      <View>
        <Text>{this.state.count}</Text>
      </View>
    );
  }
}

以上是 React Native 组件生命周期的基本概述和代码示例。