如何从多层嵌套的子组件触发父组件重新渲染？

当子组件嵌套在父组件下多层级时，核心思路是让父组件的状态发生变化（React中组件重渲染由状态/Props变更触发），以下是几种实用方案：

1. 状态提升 + 逐层传递回调函数 #

父组件定义状态和更新状态的函数，把更新函数通过Props逐层往下传递给深层子组件，子组件调用这个函数就能触发父组件状态更新，进而重渲染。

示例代码（React）：

// 父组件
function Parent() {
  const [count, setCount] = useState(0);

  return <ChildA updateCount={setCount} />;
}

// 中间组件A
function ChildA({ updateCount }) {
  return <ChildB updateCount={updateCount} />;
}

// 深层子组件B
function ChildB({ updateCount }) {
  return <button onClick={() => updateCount(prev => prev + 1)}>点击更新父组件状态</button>;
}

2. 使用Context API避免逐层传参 #

如果嵌套层级极深，逐层传回调太繁琐，可以用React的Context API封装状态更新逻辑，深层子组件直接从Context中获取更新函数。

示例代码（React）：

// 创建Context
const CountContext = createContext();

// 父组件
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ setCount }}>
      <ChildA />
    </CountContext.Provider>
  );
}

// 中间组件A（无需再传递updateCount）
function ChildA() {
  return <ChildB />;
}

// 深层子组件B
function ChildB() {
  const { setCount } = useContext(CountContext);
  return <button onClick={() => setCount(prev => prev + 1)}>点击更新父组件状态</button>;
}

3. 全局状态管理库（适合大型应用） #

如果是复杂应用，用Redux、Zustand这类全局状态管理工具，父组件订阅全局状态的部分，深层子组件触发全局状态更新，父组件会因为依赖的全局状态变化而重渲染。

示例代码（Zustand）：

// 全局状态store
import { create } from 'zustand';

const useCountStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// 父组件
function Parent() {
  const count = useCountStore(state => state.count);
  return <div>父组件计数：{count}<ChildA /></div>;
}

// 中间组件A
function ChildA() {
  return <ChildB />;
}

// 深层子组件B
function ChildB() {
  const increment = useCountStore(state => state.increment);
  return <button onClick={increment}>点击更新全局状态</button>;
}

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