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 

    	
        show
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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 
   
       	
           show
       
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

注意事项

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 
});
function App(){
    const childRef = useRef(null);
    useEffect(()=>{
        childRef.current.focus();
    });
    return <>
    	
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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 
});
function App(){
    const childRef = useRef(null);
    return <>
    	
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意事项

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