是否建议使用useRef访问子组件值？包装组件场景实践问询

你给出的实现代码如下：

function ParentComponent (props) {
  const childRef = React.useRef(null);
  React.useEffect(() => {
    if (childRef.current) {
      console.log("child's reference value", childRef.current.someValue);
    }
  }, []);
  return (<ChildComponent {...props } ref = {childRef}></ChildComponent>)
}

核心结论 #

这种通过useRef直接读取子组件实例属性的实现，虽然能临时满足需求，但不符合React的设计原则，也存在不少潜在问题，算不上最佳实践。

存在的问题 #

• 破坏组件封装：子组件的内部属性（比如someValue）属于私有实现细节，直接通过ref读取相当于打破了组件的封装边界。如果后续子组件重构（比如重命名属性、将属性改为内部state），你的包装组件会直接报错，维护成本极高。
• 组件类型限制：这种方式仅对类组件有效——函数组件默认没有实例，除非通过forwardRef+useImperativeHandle主动暴露值，而你又不能修改子组件代码，所以如果ChildComponent是函数组件，这段代码根本拿不到someValue。
• 数据不同步：你用了空依赖数组的useEffect，只会在组件挂载时读取一次someValue。如果子组件内部的someValue后续发生变化，包装组件完全感知不到，会导致数据长期不同步。

更稳妥的替代思路 #

如果子组件本身提供了回调函数（比如onValueChange）来同步内部值，优先通过回调将值同步到包装组件的state中，这是React推荐的单向数据流方式，既安全又易维护。

如果子组件完全没有提供任何对外同步的接口，这种ref方式属于“无奈的权宜之计”，但要做好风险控制：

• 用可选链操作符做容错：childRef.current?.someValue，避免空指针报错
• 给这段代码加注释，明确标注依赖了子组件的私有属性，后续子组件迭代时需要同步检查
• 如果ChildComponent是函数组件，且你完全无法修改它，这种方式根本行不通，只能考虑其他方案（比如用状态提升重构、或者借助上下文）

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