React进阶：深入理解useRef与性能优化技术-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01008/article/details/148416132

React进阶：深入理解useRef与性能优化技术

curriculum TheOdinProject/curriculum: The Odin Project 是一个免费的在线编程学习平台，这个仓库是其课程大纲和教材资源库，涵盖了Web开发相关的多种技术栈，如HTML、CSS、JavaScript以及Ruby on Rails等。项目地址: https://gitcode.com/gh_mirrors/cu/curriculum

前言

在React开发中，我们经常会遇到需要直接操作DOM元素或优化组件性能的场景。本文将深入探讨React中的useRef钩子和性能优化技术（包括useMemo和useCallback），帮助你理解这些高级概念并掌握它们的实际应用。

为什么需要useRef？

React的核心思想是声明式编程，我们通过描述UI应该是什么样子，而不是直接操作DOM。然而，在某些特殊情况下，我们确实需要直接访问DOM元素或存储不触发重新渲染的值。这正是useRef的用武之地。

useRef的基本用法

useRef是一个React Hook，它可以让你在组件中存储一个可变的值，这个值在组件的整个生命周期中保持不变，且不会触发重新渲染。

import { useRef } from "react";

function MyComponent() {
  const myRef = useRef(initialValue);
  
  // 访问当前值
  console.log(myRef.current);
  
  // 更新值
  myRef.current = newValue;
  
  // ...
}

useRef的典型应用场景

DOM元素引用：最常见的用法是获取DOM元素的引用
存储可变值：存储不需要触发重新渲染的值
保持值的一致性：在组件重新渲染时保持某些值不变

实战：使用useRef操作DOM

让我们看一个实际的例子，如何使用useRef来自动聚焦一个输入框：

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    // 组件挂载后自动聚焦输入框
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

在这个例子中：

我们创建了一个inputRef引用
通过ref属性将这个引用与input元素关联
在useEffect中使用inputRef.current访问实际的DOM元素
调用focus()方法实现自动聚焦

为什么不用querySelector？

你可能会问，为什么不直接使用document.querySelector来获取DOM元素？原因有几点：

违背React哲学：直接操作DOM违背了React的声明式编程理念
可靠性问题：querySelector可能返回错误的元素，特别是在组件复用场景下
性能考虑：React内部有更高效的DOM更新机制

性能优化：理解Memoization

随着应用复杂度增加，性能优化变得尤为重要。React提供了几种工具来帮助我们优化性能，其中最重要的就是memoization（记忆化）技术。

什么是Memoization？

Memoization是一种优化技术，通过缓存函数调用的结果，当相同的输入再次出现时直接返回缓存的结果，避免重复计算。

useMemo：缓存计算结果

useMemo允许我们缓存昂贵的计算结果，只有当依赖项变化时才重新计算。

import { useMemo } from "react";

function ExpensiveComponent({ items }) {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [items]); // 仅在items变化时重新计算

  return <div>总计: {total}</div>;
}

useCallback：缓存函数引用

useCallback是专门用于缓存函数引用的Hook，它的语法与useMemo类似，但专门针对函数。

import { useState, useCallback } from "react";

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // 使用useCallback缓存函数
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 空依赖数组表示函数永远不会改变

  return <ChildComponent onIncrement={increment} />;
}

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log("Child rendered");
  return <button onClick={onIncrement}>增加</button>;
});

在这个例子中，increment函数被缓存，因此即使ParentComponent重新渲染，只要依赖项没有变化，ChildComponent就不会不必要地重新渲染。