React中如何让非直接子组件与App主组件通信并触发重渲染？

好问题！这种非直接子组件和App主组件的通信场景，在React开发里真的很常见——没必要非得靠层层传递props来“接力”通知，这里有几个更高效的方案可以解决你的困扰：

1. React Context API（官方推荐） #

这是React专门为跨层级组件共享状态/操作设计的API，完全匹配你的需求。你可以这么做：

• 在App组件外创建一个Context，比如DataRefreshContext
• 在App组件里定义一个重新获取数据库数据的方法（比如handleRefreshData），并通过DataRefreshContext.Provider把这个方法传递下去
• 不管是你的Component还是它的子组件，只要用useContext(DataRefreshContext)拿到这个方法，在完成元素创建后直接调用它，就能通知App重新拉取数据、更新组件树了

举个简单的代码示例：

// 创建Context
const DataRefreshContext = React.createContext();

// App组件
function App() {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    // 从服务器获取最新数据的逻辑
    const res = await fetch('/api/data');
    const newData = await res.json();
    setData(newData);
  };

  // 组件挂载时先获取一次数据
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <DataRefreshContext.Provider value={{ fetchData }}>
      <Component />
    </DataRefreshContext.Provider>
  );
}

// 中间的Component或者它的子组件
function Component() {
  const { fetchData } = useContext(DataRefreshContext);

  const createNewElement = async () => {
    // 向服务器发送创建请求的逻辑
    await fetch('/api/elements', { method: 'POST', body: JSON.stringify(newElement) });
    // 调用Context里的方法通知App刷新数据
    fetchData();
  };

  return (
    <button onClick={createNewElement}>创建新元素</button>
  );
}

2. 状态管理库（适合复杂项目） #

如果你的项目后续会有更多跨组件通信、全局状态管理的需求，直接用状态管理库会更省心。比如Zustand（轻量简洁）、Redux Toolkit（官方推荐的Redux简化版）或者Jotai（原子化状态管理）。

拿Zustand举个例子：

// 创建全局store
import { create } from 'zustand';

const useDataStore = create((set) => ({
  data: [],
  fetchData: async () => {
    const res = await fetch('/api/data');
    const newData = await res.json();
    set({ data: newData });
  },
}));

// App组件
function App() {
  const data = useDataStore((state) => state.data);
  const fetchData = useDataStore((state) => state.fetchData);

  useEffect(() => {
    fetchData();
  }, []);

  return <Component />;
}

// 任意层级的组件
function Component() {
  const fetchData = useDataStore((state) => state.fetchData);

  const createNewElement = async () => {
    await fetch('/api/elements', { method: 'POST', body: JSON.stringify(newElement) });
    // 直接调用store里的方法刷新数据
    fetchData();
  };

  return <button onClick={createNewElement}>创建新元素</button>;
}

这种方式下，不管组件在哪个层级，都能直接访问全局store的方法和状态，完全不用管组件树的层级关系。

3. 自定义事件（通用JS方案） #

如果你不想依赖React的API，也可以用原生JS的自定义事件来实现：

• 在App组件挂载时，监听一个自定义事件（比如'refresh-app-data'），事件触发时执行重新获取数据的逻辑
• 在Component完成创建操作后，手动触发这个自定义事件
• 注意在App组件卸载时移除事件监听，避免内存泄漏

代码示例：

// App组件
function App() {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const res = await fetch('/api/data');
    const newData = await res.json();
    setData(newData);
  };

  useEffect(() => {
    fetchData();
    // 监听自定义事件
    const handleRefresh = () => fetchData();
    window.addEventListener('refresh-app-data', handleRefresh);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('refresh-app-data', handleRefresh);
    };
  }, []);

  return <Component />;
}

// Component组件
function Component() {
  const createNewElement = async () => {
    await fetch('/api/elements', { method: 'POST', body: JSON.stringify(newElement) });
    // 触发自定义事件
    window.dispatchEvent(new CustomEvent('refresh-app-data'));
  };

  return <button onClick={createNewElement}>创建新元素</button>;
}

这个方案比较灵活，甚至可以在非React组件里触发事件，适合一些混合开发的场景。

总的来说，层层传递props（也就是所谓的“props drilling”）虽然可行，但层级深了之后会让代码变得臃肿难维护，上面这几个方案都能更优雅地解决你的问题。如果只是单一的通信需求，Context API足够用；如果项目复杂，状态管理库会更合适；自定义事件则是个通用的兜底方案。

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