React Hooks —— ref hooks

什么是Hooks

Hooks从语法上来说是一些函数。这些函数可以用于在函数组件中引入状态管理和生命周期方法。

React Hooks的优点

1. 简洁
   从语法上来说，写的代码少了
2. 上手非常简单
   • 基于函数式编程理念，只需要掌握一些JavaScript基础知识
   • 与生命周期相关的知识不用学，react Hooks使用全新的理念来管理组件的运作过程
   • 与HOC相关的知识不用学，React Hooks能够完美解决HOC想要解决的问题，并且更可靠
   • Mobx取代了Redux做状态管理
3. 代码复用性更好
4. 与Typescript结合更简单

React Hooks的缺点

1. 状态不同步
   在异步操作的函数中访问的状态还是原来的状态的值
2. useEffect依赖问题
   当useEffect依赖的数据变多后会导致频繁触发

React Hooks的注意事项

1. 命名规范
   自定义Hooks的命名一律使用use作为前缀，形如：useXXX
2. 仅在最外层调用React Hooks
3. 仅从react函数中调用react Hooks
   在自定义Hooks或者组件中调用Hooks

ref hook

可以在函数式组件中存储/查找组件内的元素或其他数据

useRef

useRef(initialValue)返回一个可变的ref对象，该对象只有一个current属性，初始值为传入的参数initialValue，并且返回的ref对象在组件的整个生命周期内保持不变。

作用：

• 用来获取DOM节点的实例，与React.createRef()作用一样
• 存储渲染周期之间的共享数据

1. 获取DOM节点的实例

import {useRef} from 'react'
function APP(){const userRef = useRef(null);const clickButton = ()=>{if(userRef.current){console.log(userRef.current);}}return <div><input name="username" ref={userRef} /><button onClick={clickButton}>show</button></div>
}

2. 存储共享数据

   import {useRef,useState} from 'react'
   function APP(){const [count,setCount] = useState(0);const countRef = useRef(null);const preCount = countRef.current;useEffect(()=>{countRef.current = count;});const clickButton = ()=>{setCount(count+1);}return <div><input name="username" /><button onClick={clickButton}>show</button></div>
   }
   

注意事项

1. 组件的每次渲染，useRef的返回值都不变
2. ref.current发生变化并不会造成重新渲染
3. 不可以在render中更新ref.current的值，否则会导致ref.current的值计算错误
   这是因为当其他的数据发生变化时，会导致重新渲染，这时ref.current会更新，这就导致计算错误。
4. 元素属性的ref的值不能是useRef返回的对象以外的值
5. ref.current的值发生变化不会触发useEffect

forwardRef

当ref作用在一个函数式组件上时不会获取到组件实例。因此需要使用forwardRef。

forwardRef会创建一个React组件，这个组件能够将其接收的ref属性转发到自己的组件树。

forwardRef()的用法是包裹一个组件。

import {forwardRef,useRef,useEffect} from 'react'
const Child = forwardRef((props,ref)=>{return <input ref={ref} type="text" />
});
function App(){const childRef = useRef(null);useEffect(()=>{childRef.current.focus();});return <><Child ref={childRef}></Child></>
}

useImperativeHandle

useImperativeHandle允许组件自定义需要暴露的ref数据，是为了解决useRef获取到组件的所有属性和方法的问题。

useImperativeHandle(ref,handle,[deps])：

• ref：需要暴露的ref引用
• handle：是一个函数，返回值会作为ref.current的值
• deps：依赖数据，需要监听的状态

import {useRef,useImperativeHandle,forwardRef} from 'react'
const Child = forwardRef((props,ref){useImperativeHandle(ref,()=>{return {focus:()=>ref.current.focus()}},[props.value]);retunr <input ref={ref} value={props.value} />
});
function App(){const childRef = useRef(null);return <><Child ref={childRef}></Child></>
}

注意事项

• useImperativeHandle和React.forwardRef必须配合使用，否则在运行的时候会直接报错。
• 使用useImperativeHandle后，可以让父、子组件分别有自己的ref，通过React.forwardRef将父组件的ref传递过来，通过useImperativeHandle方法来自定义开放给父组件的current。