React：如何为依赖子组件props的可复用hooks/函数实现Provider？

核心是把依赖组件props的状态逻辑封装到Context Provider中，统一管理并向下注入，同时解决闭包和引用稳定性问题，避免传递出现undefined。

1. 创建Context定义共享结构 #

首先创建React Context，规范需要共享的三个变量的结构：

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

// 初始化Context，默认值设为null，后续会在Provider中注入真实值
const ParamsContext = createContext(null);

2. 封装Provider组件，封装核心逻辑 #

把原来ChildComponent里的状态管理、useParams调用、setParam封装成独立的Provider组件，它接收当前组件的attributes作为props，内部处理状态和方法：

function ParamsProvider({ attributes, children }) {
  const [pieceOfState, setPieceOfState] = useState('foo');

  // 用useMemo缓存params，仅当attributes或pieceOfState变化时重新计算
  const params = useMemo(() => {
    return useParams(attributes, pieceOfState);
  }, [attributes, pieceOfState]);

  // 用useCallback包裹set方法，确保引用稳定，同时解决闭包中状态旧值问题
  const set = useCallback((name, param) => {
    // 假设setParam逻辑是计算新的pieceOfState，这里直接调用并更新状态
    const newPieceOfState = setParam(name, param, attributes, pieceOfState);
    setPieceOfState(newPieceOfState);
  }, [attributes, pieceOfState]);

  // 注入三个变量到Context
  return (
    <ParamsContext.Provider value={{ pieceOfState, params, set }}>
      {children}
    </ParamsContext.Provider>
  );
}

3. 自定义Hook简化消费 #

写一个自定义Hook，避免每个消费组件都重复写useContext和校验逻辑：

function useParamsContext() {
  const context = useContext(ParamsContext);
  if (!context) {
    throw new Error('useParamsContext 必须在 ParamsProvider 内部使用');
  }
  return context;
}

4. 改造原有组件 #

父组件（原ChildComponent） #

简化成仅负责传递props并包裹Provider：

export default function ChildComponent({ attributes }) {
  return (
    <ParamsProvider attributes={attributes}>
      <SomeGrandchildComponent />
    </ParamsProvider>
  );
}

孙组件（SomeGrandchildComponent） #

直接用自定义Hook获取所需变量，无需再通过props传递：

function SomeGrandchildComponent() {
  const { params, set } = useParamsContext();

  // 正常使用params和set即可，比如：
  const handleSetParam = () => {
    set('someKey', 'newValue');
  };

  return (
    <div>
      <p>当前参数：{JSON.stringify(params)}</p>
      <button onClick={handleSetParam}>更新参数</button>
    </div>
  );
}

关键注意点 #

• 闭包问题：用useCallback包裹set方法，确保依赖项更新时方法引用也更新，避免使用旧的pieceOfState值。
• 性能优化：用useMemo缓存params，避免每次渲染都重新计算。
• 范围校验：自定义Hook中添加校验，确保组件在Provider范围内使用，避免意外拿到undefined。

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