Ref 相关

1. ref
2. forwordRef
3. 过时的ref
4. ref/forwordRef 实例
5. ref/forwordRef 源码分析

ref 知识点

1. 为何需要 ref
2. 创建/访问 ref
3. 为 DOM、React(class, function)组件添加 ref
   • 函数组件上不能直接使用 ref 属性
4. 在父组件中引用子节点的 DOM 节点
5. 回调 Refs

forwordRef 知识点

1. 含义：Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。
2. ref 转发的方向是： 父组件到子组件
3. 本质是：我们要在父组件中访问子组件的DOM

forwordRef 实例

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>

• forwordRef 接收一个类 React 函数组件作为参数，返回值也是一个函数组件。

这里的 ref 就类似于 props 传递到了内部，这里ref 通过组件转发之后我们就知道是：button 这个 dom 元素。

参考

• React 新的Ref API
• Refs 转发