useRef()基本用法

useRef()

useRef（）常在Echarts当中用到，我们也可以用它获取到想要获取到dom元素，从而实现操作dom的效果。

useRef()返回以一个具有current属性的ref对象，但改变ref并不会重新引发渲染，（与state区分），尽量不要在渲染期间写入ref,如：

function MyComponent() {
  // ...
  // 🚩 不要在渲染期间写入 ref
  myRef.current = 123;
  // ...
  // 🚩 不要在渲染期间读取 ref
  return <h1>{myOtherRef.current}</h1>;
}

但是可以在事件处理程序或者effect中使用：

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ 你可以在 effects 中读取和写入 ref
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ 你可以在事件处理程序中读取和写入 ref
    doSomething(myOtherRef.current);
  }
  // ...
}

ref.current可以保存任何值，只需要记住ref是一个普通的对象即可。

useRef()操作dom元素

useRef（）最常用的功能之一就是使用ref来操作Dom元素，这适用于在jsx中我们不建议直接操作dom元素，但是可以使用ref来进行，具体操作如下：

import {useRef} from 'react'

function Myinstance(){
    const inputRef=useRef(null);
    ...
    return <input ref={inputRef} />
}

注意：当react创建dom节点并将其渲染到屏幕的时候，react会将dom节点设置为ref对象的current属性，这样我们就可以调用到dom属性的例如focus、value等方法

inputRef.current.focus()

不能使用ref的场景

1. hooks只能在组件的顶层被调用

   //可行
   function App(){
       const myRef=useRef(null)
   }
   //不可行
   <ul>
     {items.map((item) => {
       const ref = useRef(null);
       return <li ref={ref} />;
     })}
   </ul>
   

2. ref只能在组件内部使用，不能访问其他组件的DOM节点

   //MyInput组件
   function MyInPut(props){
       return <input {...props} />
   }
   
   
   //不可行
   import MyInput fron'&/component/myInput'
   
   function App(){
       const inputRef=useRef(null);
       return(
       <>
           <MyInput ref={inputRef} />
       
       </>)
   }
   

   但如果想要暴露子组件的DOM节点，我们可以这么做：使用forwardRef将自身的ref转发给一个子组件。

   //改写MyInput
   const MyInput= forwardRef((props,ref)=>{
       return <input {...props} ref={ref} />
   })