React中修改子组件：使用Ref还是Prop？

嘿，这个问题问到点子上了——很多刚接触React的开发者都会在这两种方式里纠结，我结合实际项目经验给你捋清楚：

为什么优先用Prop传递？ #

React的核心设计理念就是单向数据流，父组件通过props把数据传给子组件，子组件根据props渲染UI，这种模式让组件的行为完全可预测，代码也更容易维护和复用：

• 子组件可以做成纯组件（函数组件配合React.memo），只要props不变，渲染结果就不变，天然支持性能优化
• 数据流向清晰，出问题时能快速追踪到哪里的props发生了变化
• 子组件不需要关心父组件的逻辑，只需要处理自身接收的props，组件间耦合度极低

举个简单的示例代码：

// 父组件
function Parent() {
  const [childHeight, setChildHeight] = useState('200px');
  
  const handleAdjustHeight = () => {
    setChildHeight(childHeight === '200px' ? '300px' : '200px');
  };

  return (
    <div>
      <button onClick={handleAdjustHeight}>切换子组件高度</button>
      <ChildComponent height={childHeight} />
    </div>
  );
}

// 子组件
function ChildComponent({ height }) {
  return (
    <div 
      style={{ 
        height, 
        border: '1px solid #ddd', 
        padding: '10px' 
      }}
    >
      我是根据props调整高度的子组件
    </div>
  );
}

什么时候才用组件引用（refs）？ #

refs是用来直接操作DOM或组件实例的，属于“万不得已”的备选方案，只有遇到以下场景时才考虑：

• 子组件的高度依赖于DOM元素的实际计算值（比如滚动容器的可视高度、内容撑开的真实高度），没法提前通过props传递
• 使用第三方UI组件库时，组件本身没有暴露控制高度的props
• 需要执行非React生命周期的DOM操作（比如聚焦输入框、滚动到指定位置）

但要注意：用refs会打破单向数据流，让组件间耦合度变高，调试时很难追踪到哪里修改了子组件的状态，所以能不用就不用。如果一定要用，函数组件用useRef，类组件用createRef，示例如下：

// 父组件用refs修改子组件高度
function Parent() {
  const childRef = useRef(null);
  
  const handleAdjustHeight = () => {
    if (childRef.current) {
      childRef.current.style.height = 
        childRef.current.style.height === '200px' ? '300px' : '200px';
    }
  };
  
  return (
    <div>
      <button onClick={handleAdjustHeight}>切换子组件高度</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

// 子组件通过forwardRef转发ref到DOM元素
const ChildComponent = React.forwardRef((props, ref) => {
  return (
    <div 
      ref={ref} 
      style={{ 
        height: '200px', 
        border: '1px solid #ddd', 
        padding: '10px' 
      }}
    >
      我是通过refs调整高度的子组件
    </div>
  );
});

总结建议 #

90%以上的场景，都优先用Prop的方式，这完全符合React的设计哲学，能让你的代码更健壮、更易维护。只有当Prop完全无法满足需求（比如必须直接操作DOM）时，再考虑用refs，而且用的时候要尽量减少对refs的依赖，避免滥用。

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