面试题：React中useRef Hook与性能优化

Question

在一个频繁渲染的组件中，使用useRef Hook来存储一个不会引起重新渲染的数据，并阐述为何useRef能达到这个效果，以及在这种场景下使用它相比其他方式（如useState）的优势在哪里。

Answer 1

使用 useRef 存储不引起重新渲染的数据

在频繁渲染的组件中，可以这样使用 useRef：

import React, { useRef } from 'react';

const FrequentRenderComponent = () => {
    const myRef = useRef(null);

    // 在需要的时候修改 myRef.current 的值
    const handleClick = () => {
        myRef.current = 'Some new value';
    };

    return (
        <div>
            <button onClick={handleClick}>Click to update ref</button>
        </div>
    );
};

export default FrequentRenderComponent;

useRef 能达到此效果的原因

1. 不触发重新渲染：useRef 返回的 ref 对象在组件的整个生命周期内保持不变。当修改 ref.current 的值时，React 不会将其视为状态变化，因此不会触发组件的重新渲染。这是因为 useRef 的设计初衷是用于在组件渲染之间保持可变的值，而不是用于驱动 UI 更新。
2. 内存中的持久化存储：ref 对象就像是一个在组件作用域内的“盒子”，可以存放任何类型的数据。它不会像 useState 那样，每次状态更新时都触发组件重新渲染，而是将数据存储在内存中，组件渲染时可以访问到最新的值。

使用 useRef 相比 useState 的优势

1. 性能优化：在频繁渲染的组件中，如果使用 useState 存储不需要影响 UI 的数据，每次更新该状态都会导致整个组件重新渲染，这可能会带来不必要的性能开销。而 useRef 不会触发重新渲染，从而提升了性能。
2. 保持中间状态：useRef 可以方便地用于保持一些中间状态，比如定时器 ID、DOM 元素引用等。这些数据的变化不需要反映在 UI 上，使用 useRef 可以在不干扰组件渲染流程的情况下管理这些状态。
3. 减少副作用：useState 通常需要结合 useEffect 来处理副作用，因为状态变化会触发重新渲染，可能导致不必要的副作用执行。而 useRef 不触发重新渲染，减少了处理副作用的复杂性。