为什么 ref 不属于 props，反而需要 forwardRef 呢？
当我们有一个非常简单的表单组件，伪代码如下：
const Form = () => { return <form> <label for="name"></label> <input type="text" id="name"></input> <button>submit</button> </form> }
我想在外部直接获取 button 的 DOM 引用，该怎么做呢？
理想状态是，我们传递一个 ref 属性。
const Page = () => { const buttonRef = useRef() return <Form ref={buttonRef} /> }
然后在 Form 组件中接收并绑定。
const Form = ({ ref }) => { return <form> <label for="name"></label> <input type="text" id="name"></input> <button ref={ref}>submit</button> </form> }
但是很遗憾，React 并没有这样做。
对应地，React 发明了 forwardRef 这种让代码变得难以阅读的用法。
const Form = forwardRef((props, ref) => { return <form> <label for="name"></label> <input type="text" id="name"></input> <button ref={ref}>submit</button> </form> })
为什么要这样用呢？因为 ref 不仅仅只是做 DOM 节点引用的，它的作用是「不会重新渲染的状态」。
为什么 ref 不是 refs 呢？
接下来，我的需求变了，我需要获取 input 的 DOM 引用，该怎么做呢？
最简单的方法是把 ref 绑定到 form 元素上，然后通过 form 元素的 DOM API 去获取子元素。
但这样似乎很不 React。
当然还有一个办法，将 ref 传递一个对象。
像这样：
const Page = () => { const buttonRef = useRef() const inputRef = useRef() return <Form ref={{ buttonRef, inputRef}} /> }
然后子组件的代码这样写：
const Form = forwardRef((props, ref) => { return <form> <label for="name"></label> <input ref={ref.inputRef} type="text" id="name"></input> <button ref={ref.buttonRef}>submit</button> </form> })
但这样又和 TypeScript 无法一起使用了。
为什么？因为 ref 的类型应该是一个 callback 或者是一个具有 current 属性的对象。
但是，其实只需要把 ref 改为 refs，就没有这么多烦恼了。
关于这一点，React 开发团队并没有什么解释，我认为是它们设计上的失误。
什么是 useImperativeHandle Hooks？
相信这个 API 对大多数 React 工程师来说都没有接触过。
它是做什么用的？从字面意思似乎是在做命令式编程时用的。React 官方的说法是，它需要暴露给父组件 DOM 实例时使用，一般要和 forwardRef 一起使用。
这个 Hooks 该怎么用呢？非常简单。
父组件不变，仍然传递一个 ref。
const Page = () => { const ref = useRef() return <Form ref={ref} /> }
子组件要发生一些变化了。
const Form = ({ ref }) => { const labelRef = useRef(); const inputRef = useRef(); const buttonRef = useRef(); useImperativeHandle(ref, () => ({ get label() { return labelRef.current; }, get input() { return inputRef.current; }, get button() { return buttonRef.current; }, })) return <form> <label ref={labelRef} for="name"></label> <input ref={inputRef} type="text" id="name"></input> <button ref={buttonRef}>submit</button> </form> }
在父组件中访问子组件的 DOM 实例时：
ref.current.input ref.current.button
总结
可以看到，React 在设计上并非尽如人意。它也有很多令人难以理解的地方。
