07.一文搞懂useRef

useRef 在Hooks中用来获取Dom元素，也可以用来保存变量，useRef返回一个ref对象，它的.current是初始化的内容。返回的ref对象在整个组件的生命周期内保持不变。

• 获取Dom元素用法

   // Comp1,js
   import React,{ useRef } from 'react';
   
   function Comp1() {
     //创建ref
     const inputEl = useRef();
     
     function getValue(){
       //获取input的value  inputEl.current就是Dom标签
       console.log(inputEl.current.value);
     }
     
     return (
       <div>
         {/* 赋值 */}
         <input ref={inputEl} type="text" />
         <button onClick={getValue}>点击获取value值</button>
       </div>
     )
   }
   export default Comp1;
   
   // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Comp1 from './Comp1';
   ReactDOM.render(<Comp1 />, document.getElementById('root'));
  

• 保存变量用法

   //Comp2.js
   import React,{ useState,useEffect,useRef } from 'react';
   
   function Comp2() {
     const [text,setText] = useState('text');
     
     const textRef = useRef();
     
     useEffect(()=>{
       //数据更新时会触发这个函数
       //每次更改一次就保存一次
       textRef.current = text;
     })
     
     return (
       <div>
         <input type="text" value={text} onChange={e=>{ setText(e.target.value) }} />
         {/* 获取变量 */}
         <h2>{textRef.current}</h2>
       </div>
     )
   }
   export default Comp2;
   
   // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Comp2 from './Comp2';
   ReactDOM.render(<Comp2 />, document.getElementById('root'));
  

  本质上，useRef像是一个盒子，它的.current可以用来存贮任何可变的内容