React Native：导入值变化重渲染及跨文件触发组件重渲染需求

嘿，完全理解你不想为这点小事引入Redux/Flux的心情——简单应用就得用简单方案！这里有几个轻量级的实现方式，全都是原生或React自带的，不用加额外依赖：

方案1：React Context API（推荐，React原生跨组件状态方案） #

这是React官方提供的轻量状态共享方式，专门解决跨组件通信问题，完全不需要额外库。

步骤： #

1. 先创建一个Context文件（比如AuthContext.js）：

import { createContext, useState, useContext } from 'react';

// 创建上下文
const AuthContext = createContext();

// 封装Provider组件，提供状态和方法
export function AuthProvider({ children }) {
  const [isRegistered, setIsRegistered] = useState(false);

  // 注册成功后触发状态更新的方法
  const handleRegister = () => {
    // 这里可以先执行你的注册逻辑，比如接口请求
    setIsRegistered(true);
  };

  return (
    <AuthContext.Provider value={{ isRegistered, handleRegister }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook，方便组件获取上下文
export function useAuth() {
  return useContext(AuthContext);
}

2. 在根组件里用AuthProvider包裹Home和ui组件：

import { AuthProvider } from './AuthContext';
import Home from './Home';
import UI from './ui';

function App() {
  return (
    <AuthProvider>
      <Home />
      <UI />
    </AuthProvider>
  );
}

3. 在ui.js里调用注册方法：

import { useAuth } from './AuthContext';

function UI() {
  const { handleRegister } = useAuth();

  return (
    <button onClick={handleRegister}>点击注册</button>
  );
}

4. 在Home.js里监听状态变化，自动重渲染：

import { useAuth } from './AuthContext';

function Home() {
  const { isRegistered } = useAuth();

  // 只要isRegistered状态变化，组件就会自动重渲染
  return (
    <div>
      {isRegistered ? 
        <p>🎉 注册成功！内容已更新</p> : 
        <p>请点击注册按钮完成操作</p>
      }
    </div>
  );
}

方案2：浏览器自定义事件（纯原生，适合非React组件通信） #

如果你的ui.js是普通JS文件（不是React组件），可以用浏览器原生的自定义事件来触发重渲染。

步骤： #

1. 在Home.js组件里监听自定义事件：

import { useEffect, useState } from 'react';

function Home() {
  const [refreshFlag, setRefreshFlag] = useState(false);

  useEffect(() => {
    // 定义事件处理函数：切换状态触发重渲染
    function handleRegisterSuccess() {
      setRefreshFlag(prev => !prev);
    }

    // 监听自定义事件
    window.addEventListener('registerSuccess', handleRegisterSuccess);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('registerSuccess', handleRegisterSuccess);
    };
  }, []);

  return (
    <div>
      {refreshFlag ? 
        <p>注册完成，页面已更新</p> : 
        <p>等待注册...</p>
      }
    </div>
  );
}

2. 在ui.js里触发事件：

// 假设这是ui.js里的注册按钮点击逻辑
document.getElementById('registerBtn').addEventListener('click', () => {
  // 先执行你的注册逻辑（比如表单验证、接口请求）
  console.log('注册逻辑执行完成');
  // 触发自定义事件，通知Home组件重渲染
  window.dispatchEvent(new CustomEvent('registerSuccess'));
});

方案3：状态提升到共同父组件（最基础的React方式） #

如果Home和ui组件有共同的父组件，直接把状态放在父组件里，通过props传递回调和状态即可。

步骤： #

1. 父组件（比如App.js）：

import { useState } from 'react';
import Home from './Home';
import UI from './ui';

function App() {
  // 用一个状态作为触发重渲染的标识
  const [registerTrigger, setRegisterTrigger] = useState(false);

  const handleRegister = () => {
    // 切换状态，触发Home组件重渲染
    setRegisterTrigger(prev => !prev);
  };

  return (
    <div>
      <Home trigger={registerTrigger} />
      <UI onRegister={handleRegister} />
    </div>
  );
}

2. ui.js调用父组件传递的回调：

function UI({ onRegister }) {
  return <button onClick={onRegister}>点击注册</button>;
}

3. Home.js接收状态，自动重渲染：

function Home({ trigger }) {
  // 每次trigger变化，组件都会自动重渲染
  return <div>当前状态：{trigger ? '已注册' : '未注册'}</div>;
}

这些方案都能满足你的需求，不需要引入任何额外库，你可以根据自己的实际场景选择：如果都是React组件，优先选Context或状态提升；如果ui.js是纯JS文件，用自定义事件更合适。

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