react中createRef和useRef的区别

前言

之前的一篇文章给大家介绍过react中ref的使用方法，其中详细介绍了useRef的使用，点击链接查看：
react中ref使用方法解析。这篇文章给大家介绍一个新的东西——useRef，来看看他们有什么不同

useRef

为了方便进行对比，下面例子使用useRef和useRef:
1.分别使用useRef和useRef创建两个input输入框，并打印对应的值
2.在useEffect中对这两个输入框的信息进行打印

import React, {
    
     createRef, useRef, useEffect } from 'react'
export default function App() {
    
    
    const inputRef = createRef(1)
    console.log(inputRef)

    const useInputRef = useRef(2)
    console.log(useInputRef)

    useEffect(() => {
    
    
        console.log(inputRef)
        console.log(useInputRef)
    })
    return (
        <div>
            value: {
    
    inputRef.current}
            <input type="text" ref={
    
    inputRef} />
            <button onClick={
    
    e => {
    
    inputRef.current.focus();inputRef.current.value=4}}>获取焦点</button>
            <br/>
            value: {
    
    useInputRef.current}
            <input type="text" ref={
    
    useInputRef} />
            <button onClick={
    
    e => {
    
    useInputRef.current.focus();inputRef.current.value=4}}>获取焦点</button>
        </div>
    )
}

查看结果：

可以看到，我们给createRef(1)，useRef(2)，但为什么inputRef打印为null，而useInputRef打印为2？
这是因为createRef每次重新渲染的时候都会创建一个新的ref对象，它在class组件里面去用的时候，会有对应的生命周期对其进行渲染调用render方法，所以在函数式组件中它并没有实现像useRef的功能，每次重新渲染只会得到一个null值。

所以在使用中，尽量在class组件中使用createRef，在函数组件中使用useRef。useRef第一次渲染创建一个对象之后,再重新渲染的时候,如果发现这个对象已经创建过就不会再创建第二次，性能会好一些

总结

1.createRef每次重新渲染的时候都会创建一个新的ref对象
2.useRef第一次渲染创建一个对象之后,再重新渲染的时候,如果发现这个对象已经创建过就不会再创建第二次，性能会好一些
3.尽量在class组件中使用createRef，在hooks中使用useRef