【二】跟着react官网学习__Refs and the DOM

由一个日常开发的demo展开学习：react项目，想在无状态组件中获取input的dom节点，使用ref报错：

提示中可以看到无状态组件中应该是不能使用ref获取DOM节点的，但它给出提示React.forwardRef，我们去查询一下它的用法,查询了react官网(链接在这里https://reactjs.bootcss.com/docs/refs-and-the-dom.html)。

1.让我们记住官网说明的这两句话

1）你只要记住不能在无状态组件上使用ref，因为没有实例，this根本无法指向哪里（demo中的情况是在无状态组件内的input标签上使用，两者不一样）

2）下面这句话完美的解决了我的问题：

不用使用react.forwardRef也可以实现，调用的时候ref上声明一个基点，需要用useRef去创建，然后使用current方法获取当前的DOM节点即可：下面是实现的代码

          

2.那么现在让我们来了解一下forwardRef

forwardRef的介绍在Refs 转发专项中，我们一起来学习一下官网上的例子：

这句话理解就是通过调用封装好的组件，将createdRef创建好的ref，通过属性传递到组件内部，forwardRef获取后，传递到button节点上，我们如果想直接操作button节点，执行ref.current.xxx()即可实现对button的操作，这就是转发，forwardRef实现了从组件外，到组件内的转发，也可以说是向下转发，刚才出错的demo也可以这么实现： 

3.回调Refs

这么理解，在text的input框中ref上使用了回调函数，将节点的引用存储在了事先声明好的textInput中，当点击按钮时，拿来节点使用即可

4.总结几个概念，刚才也有提到

1）Refs 是使用 React.createRef() 创建的；

2）当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问，也就是this.ref.current.xxx();

3)  你可以为class组件添加Ref，但不能为函数组件添加Ref；

4）forwardRef转发，也可以说是父组件箱子组件转发ref，实现对底层DOM节点的操作；

特别的：官网上有特意提到，我们原来使用ref的方法：this.refs.xxx，本身存在一些问题，不建议使用，在以后的使用中，就像我上面的demo一样，forwardRef写成转发的形式、回调的形式、或者直接使用createdRef即可。

希望对你有所帮助！

Best Wishes