React Native中组件B触发后如何重新渲染已渲染的组件A

你的问题核心在于ComponentA和ComponentB没有共享状态，且ComponentA作为PureComponent只有在自身props/state变化时才会重新渲染。当你在ComponentB中触发状态变更时，ComponentA完全感知不到这个变化，所以不会更新UI。下面给你几种实用的解决方案，按推荐程度排序：

方案1：React Context + 持久化存储（最推荐） #

React Context是React内置的全局状态管理方案，完美解决这种跨组件、跨导航的状态共享需求，结合持久化存储还能保证用户重启APP后状态不丢失。

步骤1：创建全局状态Context #

// PremiumContext.js
import React, { createContext, useState, useContext, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const PremiumContext = createContext();

export const PremiumProvider = ({ children }) => {
  // 初始化状态，优先从本地存储读取
  const [isPremium, setIsPremium] = useState(false);

  useEffect(() => {
    const loadSavedStatus = async () => {
      const savedStatus = await AsyncStorage.getItem('isPremium');
      if (savedStatus !== null) {
        setIsPremium(savedStatus === 'true');
      }
    };
    loadSavedStatus();
  }, []);

  // 封装更新状态的方法，同时持久化到本地
  const updatePremiumStatus = async (status) => {
    setIsPremium(status);
    await AsyncStorage.setItem('isPremium', status.toString());
  };

  return (
    <PremiumContext.Provider value={{ isPremium, updatePremiumStatus }}>
      {children}
    </PremiumContext.Provider>
  );
};

// 自定义Hook，简化Context消费
export const usePremium = () => useContext(PremiumContext);

步骤2：在App入口包裹Provider #

把整个导航容器放在Provider内部，让所有组件都能访问到全局状态：

// App.js
import { PremiumProvider } from './PremiumContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航栈配置

export default function App() {
  return (
    <PremiumProvider>
      <NavigationContainer>
        {/* 你的StackNavigator/DrawerNavigator等 */}
      </NavigationContainer>
    </PremiumProvider>
  );
}

步骤3：改造ComponentA（支持函数/Class组件） #

函数组件版本

import { usePremium } from './PremiumContext';

function ComponentA() {
  const { isPremium } = usePremium();

  // 当isPremium变化时，自动重新渲染
  return isPremium ? <SearchFormPremium /> : <SearchForm />;
}

Class组件版本

import { PremiumContext } from './PremiumContext';

class ComponentA extends PureComponent {
  static contextType = PremiumContext;

  render() {
    const { isPremium } = this.context;
    return isPremium ? <SearchFormPremium /> : <SearchForm />;
  }
}

步骤4：改造ComponentB #

// 函数组件版本
import { usePremium } from './PremiumContext';

function ComponentB({ navigation }) {
  const { updatePremiumStatus } = usePremium();

  const handlePurchase = () => {
    updatePremiumStatus(true);
    // 购买完成后可以返回ComponentA
    navigation.goBack();
  };

  return <Button onPress={handlePurchase} title="解锁高级版" />;
}

// Class组件版本
import { PremiumContext } from './PremiumContext';

class ComponentB extends PureComponent {
  static contextType = PremiumContext;

  handlePurchase = () => {
    this.context.updatePremiumStatus(true);
    this.props.navigation.goBack();
  };

  render() {
    return <Button onPress={this.handlePurchase} title="解锁高级版" />;
  }
}

方案2：react-navigation焦点监听 + 本地存储 #

如果不想用全局状态，可以利用react-navigation的focus事件，每次ComponentA回到前台时，主动读取本地存储的状态并更新自身state，触发重新渲染。

改造ComponentA（Class组件示例） #

import AsyncStorage from '@react-native-async-storage/async-storage';

class ComponentA extends PureComponent {
  state = {
    isPremium: false,
  };

  componentDidMount() {
    this.loadPremiumStatus();
    // 监听页面焦点事件，每次回到这个页面就重新拉取状态
    this.focusListener = this.props.navigation.addListener('focus', this.loadPremiumStatus);
  }

  componentWillUnmount() {
    // 清理监听
    this.focusListener();
  }

  loadPremiumStatus = async () => {
    const savedStatus = await AsyncStorage.getItem('isPremium');
    this.setState({ isPremium: savedStatus === 'true' });
  };

  render() {
    return this.state.isPremium ? <SearchFormPremium /> : <SearchForm />;
  }
}

改造ComponentB #

import AsyncStorage from '@react-native-async-storage/async-storage';

class ComponentB extends PureComponent {
  handlePurchase = async () => {
    await AsyncStorage.setItem('isPremium', 'true');
    this.props.navigation.goBack();
  };

  render() {
    return <Button onPress={this.handlePurchase} title="解锁高级版" />;
  }
}

方案3：Redux（适合复杂大型应用） #

如果你的APP有很多全局状态需要管理，比如用户信息、购物车等，可以引入Redux。核心思路是把高级版状态存在Redux store中，ComponentB触发action更新store，ComponentA通过connect或useSelector订阅store状态变化，自动重新渲染。不过对于单一状态来说，Context已经足够轻便。

为什么你的原代码不生效？ #

你的原代码中，userHasNotClickedOnComponentB应该是ComponentA的本地状态或者某个未共享的变量，当ComponentB执行setPremium()时，这个变量并没有被更新，ComponentA的props/state也没有变化，所以作为PureComponent不会重新渲染。只有让状态在两个组件之间共享，或者让ComponentA能感知到外部状态的变化，才能触发重新渲染。

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