使用Ref转发在React组件间传递函数是否属于最佳实践？

问题场景 #

原本将控制面板内嵌在管理数据的函数组件中，为了优化拆分了两者，现在通过forwardRef将组件内部的updateData、deleteData方法挂载到Ref上，供父组件中的控制面板调用，想知道这种方式是否属于最佳实践，以及除了已发现的状态捕获问题外，还有哪些隐患。

示例代码：

const SomeComponent = forwardRef((props, ref) => {
  // ...
  if(ref){
    ref.updateData = updateData
    ref.deleteData = deleteData
  }
  return <DataRepresentation />
})
const Controls = (props) => {
  return <Controls onClick={props.onClick} />
}
const SharedParent = (props) => {
  const dataRef = useRef()
  return (
    <div> 
      <Controls onClick={dataRef.updateData} />
      <SomeComponent ref={dataRef} />
    </div>
  )
}

已发现的问题：当方法依赖组件内部状态时，会因闭包捕获旧状态导致逻辑错误。比如：

const [status, setStatus] = useState(false)
const updateData = () => {
  setStatus(!status)
}

实际调用时可能始终执行setStatus(true)，无法正确切换状态。

其他潜在隐患 #

• 破坏组件封装性：组件内部方法属于实现细节，通过Ref暴露给外部后，组件内部的逻辑修改（比如方法重命名、参数调整）会直接影响到调用方，导致耦合度陡增，后续维护成本变高。
• Ref赋值时机风险：React中Ref的赋值是在组件渲染完成后才完成的，如果父组件在初始渲染阶段（比如未进入useEffect时）就尝试调用Ref上的方法，会出现undefined调用错误。
• 类型校验缺失：如果使用TypeScript，这种手动挂载方法到Ref的方式无法获得类型系统的自动校验，调用时很容易出现参数不匹配、方法名拼写错误等问题，且无法在编译阶段发现。
• 不可预测的更新问题：函数组件每次渲染都会重新创建内部方法，但Ref本身是持久化的，除非每次渲染都重新挂载方法，否则外部调用的可能始终是旧版本的方法，除了闭包问题外，还可能导致逻辑不更新。

更优的替代方案：状态提升+单向数据流 #

遵循React的设计原则，将共享状态和操作逻辑提升到父组件SharedParent中，通过props将状态和方法传递给子组件，这样既保持了组件的封装性，又避免了Ref带来的各种问题。

改进后的示例代码：

const SomeComponent = ({ data, onUpdate, onDelete }) => {
  // 组件内部基于props接收的数据和方法渲染
  return <DataRepresentation data={data} />;
};

const Controls = ({ onUpdate, onDelete }) => {
  return (
    <div>
      <button onClick={onUpdate}>更新数据</button>
      <button onClick={onDelete}>删除数据</button>
    </div>
  );
};

const SharedParent = () => {
  const [data, setData] = useState(/* 初始数据 */);
  const [status, setStatus] = useState(false);

  const updateData = () => {
    // 这里可以直接访问最新的状态
    setStatus(!status);
    // 执行数据更新逻辑
    setData(prevData => /* 根据旧数据生成新数据 */);
  };

  const deleteData = () => {
    // 执行数据删除逻辑
    setData(prevData => /* 删除后的数据 */);
  };

  return (
    <div>
      <Controls onUpdate={updateData} onDelete={deleteData} />
      <SomeComponent data={data} onUpdate={updateData} onDelete={deleteData} />
    </div>
  );
};

总结 #

通过Ref挂载组件方法供外部调用不属于React最佳实践，这种方式会带来封装性破坏、状态过时、时机风险等多种问题。优先采用状态提升+props传递的方式，符合React单向数据流的设计理念，代码更易维护、更可预测。

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