React Ref为何是特殊特性而非普通Prop？关于替代方案的疑问

• 打破单向数据流规则：React核心是单向数据流，状态和可变值本该由父组件自己管理。你让子组件修改父组件的ref，相当于子组件直接插手了父组件的内部数据，组件间的依赖关系会变得混乱，以后排查bug会非常头疼。
• 有执行时机的风险：子组件用useEffect填充ref，是在组件渲染完成后才执行的。如果父组件在子组件还没完成渲染就去访问ref.current，拿到的会是undefined，很容易触发报错。而forwardRef配合useImperativeHandle是在渲染阶段就完成了ref关联，时机更靠谱。
• 类型检查没保障：如果用TypeScript，这种自定义的ref传递方式没法像forwardRef那样做精确的类型约束，类型检查的优势直接失效，很容易出现隐性的类型不匹配问题。
• 代码可读性差：其他开发者看到这种非常规写法，得花额外时间去理解你的逻辑，而forwardRef是React官方推荐的标准写法，大家一看就懂，维护起来更省心。

给你贴个两种写法的对比，一看就明白：

你的实现方式： #

父组件：

import { useRef } from 'react';
import Child from './Child';

function Parent() {
  const childRef = useRef(null);

  const handleClick = () => {
    // 这里可能拿到undefined，因为子组件的useEffect还没执行
    childRef.current?.doSomething();
  };

  return (
    <div>
      <button onClick={handleClick}>调用子组件方法</button>
      <Child refProp={childRef} />
    </div>
  );
}

子组件：

import { useEffect } from 'react';

function Child({ refProp }) {
  const doSomething = () => {
    console.log('子组件方法执行');
  };

  useEffect(() => {
    refProp.current = { doSomething };
  }, []);

  return <div>子组件</div>;
}

React官方标准写法： #

父组件：

import { useRef } from 'react';
import Child from './Child';

function Parent() {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current?.doSomething();
  };

  return (
    <div>
      <button onClick={handleClick}>调用子组件方法</button>
      <Child ref={childRef} />
    </div>
  );
}

子组件：

import { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  const doSomething = () => {
    console.log('子组件方法执行');
  };

  useImperativeHandle(ref, () => ({
    doSomething
  }), []);

  return <div>子组件</div>;
});

export default Child;

总结下：你的方法能跑起来，但绝对不推荐在生产代码里用。官方的forwardRef + useImperativeHandle看起来多写了几行，但能避开很多潜在问题，代码也更规范。

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