useRef开发入门教程：轻松掌握React中的useRef用法

本文全面介绍了useRef开发的相关知识，包括useRef的基本概念、与HTML元素的交互方式及其实例创建方法。文章还详细展示了useRef在获取DOM元素、更新元素属性、性能优化等方面的应用案例，并探讨了useRef与其他React Hooks结合使用的场景。

在React中，useRef 是一个Hook，它有助于在函数组件内部保持可变值的引用。使用useRef创建的引用对象可以通过.current属性来访问其值。与useState不同，useRef不会触发组件的重新渲染；它主要用于获取或操作DOM元素，或保存在组件生命周期中需要持久化的值。

useRef可以被用来引用和操作DOM元素。这在需要直接操作DOM时非常有用，例如获取元素的尺寸、位置或直接修改元素的样式。

示例代码

import React, { useRef } from 'react';

function MyComponent() {
    const inputRef = useRef(null);

    const focusInput = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focus Input</button>
        </div>
    );
}

在这个示例中，useRef 创建了一个inputRef，它被附加到input元素上。focusInput函数通过inputRef.current来获取并聚焦输入框。

使用useRef创建一个引用实例时，可以传递一个可选的初始值。例如：

import React, { useRef } from 'react';

function MyComponent() {
    const myRef = useRef(123); // 初始值为123
    console.log(myRef.current); // 输出123
}

在函数组件中，可以通过useRef Hook来创建引用，并在组件内部使用.current属性来访问和更新这个引用的值。

示例代码

import React, { useRef } from 'react';

function MyComponent() {
    const countRef = useRef(0);

    const incrementCount = () => {
        countRef.current += 1;
    };

    return (
        <div>
            <p>Count: {countRef.current}</p>
            <button onClick={incrementCount}>Increment</button>
        </div>
    );
}

在这个组件中，countRef被用来计数，每次点击按钮都会更新计数器的值。

通过useRef，可以动态地更新元素的属性或样式。例如，可以通过useRef来设置元素的样式，或者更改元素的属性。

示例代码

import React, { useRef } from 'react';

function MyComponent() {
    const divRef = useRef(null);

    const changeColor = () => {
        divRef.current.style.backgroundColor = 'red';
    };

    return (
        <div>
            <div ref={divRef}>Hello, World!</div>
            <button onClick={changeColor}>Change Color</button>
        </div>
    );
}

在这个示例中，点击按钮会改变div元素的背景颜色。

使用useRef可以方便地获取DOM元素的信息，如尺寸、位置等。

示例代码

import React, { useRef } from 'react';

function MyComponent() {
    const boxRef = useRef(null);

    const getBoxSize = () => {
        console.log(boxRef.current.offsetWidth, boxRef.current.offsetHeight);
    };

    return (
        <div>
            <div ref={boxRef} style={{ width: '100px', height: '100px' }}>Box</div>
            <button onClick={getBoxSize}>Get Box Size</button>
        </div>
    );
}

在此示例中，当点击获取尺寸按钮时，将打印出div元素的宽度和高度。

useRef的使用不会导致组件的重新渲染，因此它可以在某些特定情况下帮助优化组件的性能。例如，可以使用useRef来缓存计算结果或DOM测量，以减少不必要的计算或DOM操作。

示例代码

import React, { useRef, useEffect } from 'react';

function MyComponent() {
    const cachedValue = useRef(null);

    useEffect(() => {
        // 模拟一个昂贵的计算操作
        const result = Math.pow(Math.random(), 100000);
        cachedValue.current = result;
    }, []);

    return (
        <div>
            <p>Random: {cachedValue.current}</p>
        </div>
    );
}

在这个组件中，计算结果被缓存在useRef中，并在后续渲染中使用，避免了重复计算。

• 避免不必要的渲染：如果需要在组件中缓存某些结果以减少计算，可以使用useRef。
• 优化DOM操作：使用useRef获取DOM元素以避免直接在渲染函数中操作DOM，从而减少不必要的渲染。

useRef可以与useState结合使用，以对DOM元素的属性或样式进行动态更新。例如，可以利用useState来保存一个状态值，然后使用useRef来访问和更新DOM元素的属性。

示例代码

import React, { useRef, useState } from 'react';

function MyComponent() {
    const [color, setColor] = useState('blue');
    const divRef = useRef(null);

    const changeColor = () => {
        const newColor = color === 'blue' ? 'red' : 'blue';
        setColor(newColor);
        divRef.current.style.backgroundColor = newColor;
    };

    return (
        <div>
            <div ref={divRef} style={{ backgroundColor: color }}>Hello, World!</div>
            <button onClick={changeColor}>Change Color</button>
        </div>
    );
}

在这个组件中，点击按钮会改变颜色，颜色状态由useState管理，而颜色的更新则通过useRef来完成。

useRef可以在useEffect中使用，以在组件的生命周期中执行某些操作。例如，useRef可以用来获取某个元素的位置，然后在useEffect中对该位置进行操作。

示例代码

import React, { useRef, useEffect } from 'react';

function MyComponent() {
    const divRef = useRef(null);

    useEffect(() => {
        console.log(divRef.current.offsetTop, divRef.current.offsetLeft);
    }, []);

    return (
        <div>
            <div ref={divRef} style={{ top: '100px', left: '100px' }}>
                Hello, World!
            </div>
        </div>
    );
}

在这个组件中，组件挂载后会打印出div元素的偏移量。

ref属性是React中的一个通用概念，它允许你访问DOM节点或元素实例。useRef是实现ref属性的Hook，它返回的是一个ref对象，该对象可以用来访问DOM元素。

示例代码

import React, { useRef, useEffect } from 'react';

function MyComponent() {
    const inputRef = useRef(null);

    useEffect(() => {
        console.log(inputRef.current);
    }, []);

    return (
        <div>
            <input ref={inputRef} />
        </div>
    );
}

在这个示例中，inputRef是一个useRef返回的对象，它可以被用来访问input元素。

useRef返回的引用对象的.current属性在组件的生命周期中是持久存在的。如果直接将一个函数赋值给.current，每次组件重新渲染时都会创建一个新的函数实例，这可能导致错误的行为。为了避免这种情况，可以在组件的顶层定义函数，然后将其赋值给.current。

示例代码

import React, { useRef, useEffect } from 'react';

function MyComponent() {
    const myRef = useRef(null);

    const myFunction = () => {
        console.log('Function was called');
    };

    useEffect(() => {
        myRef.current = myFunction;
    }, []);

    return <div></div>;
}

在这个示例中，myFunction在组件顶层定义，并在useEffect中赋值给myRef.current，这样可以避免每次组件渲染时创建新的函数实例。