React Native页面切换时如何清除组件状态？componentWillUnmount失效问题

Hey there! I've dealt with this exact headache in React Native before—let's break down why your componentWillUnmount isn't working and how to fix both your scenarios.

The Core Issue #

Here's the thing: most React Native navigation libraries (like React Navigation) don't unmount your component when you navigate to another screen. They just tuck it away in the navigation stack to make back navigation faster. That means componentWillUnmount never fires, so your state-resetting code never runs.

Solutions for Your Scenarios #

Let's tackle each case with concrete code examples:

Scenario 1: Clear TextInput When Leaving the Screen

Instead of componentWillUnmount, use navigation's blur event to detect when the screen loses focus, then reset your input state.

For Class Components:

import React, { Component } from 'react';
import { TextInput } from 'react-native';
import { NavigationEvents } from 'react-navigation';

class InputScreen extends Component {
  state = { userInput: "" };

  resetInput = () => {
    this.setState({ userInput: "" });
  };

  render() {
    return (
      <>
        {/* Listen for when the screen is about to lose focus */}
        <NavigationEvents onWillBlur={this.resetInput} />
        <TextInput
          value={this.state.userInput}
          onChangeText={(text) => this.setState({ userInput: text })}
          placeholder="Type something..."
        />
      </>
    );
  }
}

For Functional Components (React Navigation v6+):

Use useFocusEffect—it lets you run code when the screen comes into focus, and a cleanup function when it loses focus:

import React, { useState } from 'react';
import { TextInput } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

const InputScreen = () => {
  const [userInput, setUserInput] = useState("");

  useFocusEffect(
    React.useCallback(() => {
      // Cleanup function runs when screen loses focus
      return () => {
        setUserInput("");
      };
    }, [])
  );

  return (
    <TextInput
      value={userInput}
      onChangeText={setUserInput}
      placeholder="Type something..."
    />
  );
};

Scenario 2: Stop ActivityIndicator When Navigating to No-Network Screen

Again, we'll use navigation events to manage the loading state. When you navigate away, reset isLoading to false—and when you return, you can re-run the network check if needed.

Example for Class Components:

import React, { Component } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { NavigationEvents } from 'react-navigation';

class DataScreen extends Component {
  state = { isLoading: true, hasNetwork: true };

  componentDidMount() {
    this.checkNetworkStatus();
  }

  checkNetworkStatus = () => {
    // Replace with your actual network check logic
    const hasNetwork = false; 
    if (!hasNetwork) {
      this.setState({ hasNetwork: false });
      this.props.navigation.navigate('NoNetworkScreen');
    } else {
      // Fetch your data here
      this.setState({ isLoading: false });
    }
  };

  handleBlur = () => {
    // Reset loading state when leaving the screen
    this.setState({ isLoading: false });
  };

  handleFocus = () => {
    // Re-check network and restart loading when returning
    this.setState({ isLoading: true });
    this.checkNetworkStatus();
  };

  render() {
    if (this.state.isLoading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }

    return (
      <View>
        {/* Your screen content here */}
      </View>
    );
  }
}

Resetting All Component State at Once #

If you want to wipe every state variable when navigating away, you can:

• For class components: Create an initial state object, then reset this.state to it in the blur handler.
• For functional components: Store all state in a single object, then reset it to the initial state in the useFocusEffect cleanup.

Example for functional components:

const initialState = {
  userInput: "",
  isLoading: true,
  filterValue: "",
  // Add all your state variables here
};

const YourScreen = () => {
  const [state, setState] = useState(initialState);

  useFocusEffect(
    React.useCallback(() => {
      return () => {
        setState(initialState); // Reset all state to initial values
      };
    }, [])
  );

  // Rest of your component logic
};

内容的提问来源于stack exchange，提问作者Abhi Singh