第
浅谈React?Refs?使用场景及核心要点
目录什么是Refs？使用方式Refs核心要点避免重复创建ref内容ref.current存储的内容修改是突变ref作为数据存储时内容的变化不会引起re-renderref的读写只能在useEffect或者回调函数中进行跨组件传递ref获取dom时需要借助forwardRef包裹组件ref绑定的dom在离屏或者未挂载时ref.current值会被修改为null最佳实践dom操作相关用于在两次render之间传递数据在使用React进行开发过程中，或多或少使用过Refs进行DOM操作或者访问一些DOM上的API，又或使用Refs保存数据。不管怎么说Refs总是React提供的一大助力，这篇文章主要介绍Refs功能和使用场景以及注意事项。希望能增强对Refs的理解，掌握好这把利剑。
什么是Refs？
Refs是React提供的用来保存object引用的一个解决方案，在函数式组件使用useRef创建一个ref对象，ref对象存在一个可直接修改的current属性，内容都是存在current上。Refs使用场景主要分为两个方向，其一是实现DOM访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。如果在组件返回的jsxdom上绑定了ref属性，React在处理jsx时会把该dom节点【原生node节点】的引用存储在ref.current上。
使用方式
分为三步：
第一步、使用useRef创建ref对象（useRef是FChooks，class组件使用React.createRef()创建）第二步、赋值使用【操作dom则绑定为dom的ref属性的值，用于保存值的时候传递内容给ref.current】,第三步、访问ref内容【进行dom对应的api访问，进行scroll、focus等操作。又或者从current中读取保存的数据】最终的目的还是最后访问拿到对应的数据进行操作。下边我们分别用两个小demo简单先看看用法，理论和总结在后边一点。
Exampleone实现点击按钮focusinput框
importReact,{useRef}fromreact;
exportdefaultfunctionComp(){
//第一步：使用useRef创建一个ref对象{current:null}
constref=useRef();
functionhandleClick(){
//第三步：访问到ref上存的内容，这里是input的node节点
ref.current.focus();
//第二步：赋值ref
return(
inputref={ref}/
buttonhandleClick}开始输入/button
}
Exampletwo实现数据发送3s内撤回功能：在点击发送后3s内如果点击取消发送则取消本次发送
简单起见我们按钮不实际发送请求，定时3s如果3s内点击了取消发送则取消发送。发送功能用提醒已发送代替，出现已发送表示执行了发送。
importReact,{useRef,useState}fromreact;
exportdefaultfunctionCompA(){
//第一步：使用useRef创建ref对象
constref=useRef();
const[isSending,setIsSending]=useState(false);
functionsend(){
//...
window.alert(消息已发送！);
setIsSending(false);
functionundo(){
//第三步：访问存在ref上的timeoutID，进行定时取消
clearTimeout(ref.current);
functionhandleClickSendBtn(){
setIsSending(true);
//第二步：赋值，将timeoutID存在ref上
ref.current=setTimeout(send,3000);
functionhandleClickC