React Native的生命周期

news2024/11/14 14:41:57

React Native 组件的生命周期分为三个阶段：Mounting（挂载）、Updating（更新） 和 Unmounting（卸载）。每个阶段都会触发不同的生命周期方法。

下面是详细的生命周期解释，并通过一个项目级的示例进行说明：

1. Mounting（挂载阶段）

当组件实例化并渲染到屏幕上时，会经历以下生命周期方法：

constructor(): 在组件实例化时调用，通常用来初始化状态或绑定事件处理方法。
static getDerivedStateFromProps(props, state): 在组件实例化和更新时，调用此方法来决定如何从 props 更新组件的 state。它返回一个对象来更新 state，或者返回 null 不做更新。
render(): 必须实现的方法，用来返回要渲染的 JSX 代码。
componentDidMount(): 组件渲染完成后调用。此方法常用于发送网络请求或添加事件监听器。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    // 可以根据新传入的 props 更新 state
    if (nextProps.shouldFetchData && !nextState.data) {
      return { data: 'Fetching data...' };
    }
    return null;
  }

  componentDidMount() {
    // 在组件挂载后，进行数据获取或其他副作用操作
    setTimeout(() => {
      this.setState({ data: 'Fetched data!' });
    }, 2000);
  }

  render() {
    return (
      <View>
        <Text>{this.state.data}</Text>
      </View>
    );
  }
}

export default ExampleComponent;

2. Updating（更新阶段）

当组件的 state 或 props 发生变化时，组件将重新渲染。更新过程中的生命周期方法包括：

static getDerivedStateFromProps(props, state): 同样会在此阶段被调用（如上所示）。
shouldComponentUpdate(nextProps, nextState): 用来判断是否需要重新渲染组件。如果返回 false，则阻止重新渲染。
render(): 和挂载阶段一样，用来渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState): 在更改发生之前调用。常用于在 DOM 更新之前获取一些信息，如滚动位置。
componentDidUpdate(prevProps, prevState, snapshot): 当组件更新后调用。此方法可以用于执行副作用操作（例如，发送网络请求）或更新外部系统。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    // 根据 props 或 state 更新 state
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 如果 count 不变，阻止更新
    if (this.state.count === nextState.count) {
      return false;
    }
    return true;
  }

  componentDidUpdate(prevProps, prevState) {
    // 组件更新后，做一些副作用操作
    console.log('Component updated:', prevState.count, '->', this.state.count);
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <View>
        <Text>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.increment} />
      </View>
    );
  }
}

export default ExampleComponent;

3. Unmounting（卸载阶段）

当组件从界面中移除时，会调用以下生命周期方法：

componentWillUnmount(): 在组件卸载前调用，通常用于清理定时器、取消网络请求或移除事件监听器。

示例：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { timer: null };
  }

  componentDidMount() {
    // 设置定时器
    const timer = setInterval(() => {
      console.log('Timer is running...');
    }, 1000);
    this.setState({ timer });
  }

  componentWillUnmount() {
    // 清理定时器
    clearInterval(this.state.timer);
    console.log('Component will unmount, timer cleared');
  }

  render() {
    return (
      <View>
        <Text>Timer is running, check console for logs.</Text>
      </View>
    );
  }
}

export default ExampleComponent;