React中的useMemo和useCallback

时间：2023-08-10 浏览：152 分类：React

useMemo和useCallback都是React Hooks，它们可以让我们在函数组件中缓存函数或者值，从而避免不必要的渲染或者计算。

useMemo和useCallback的区别在于它们缓存的内容不同。useMemo可以缓存任何值，比如数字，字符串，对象，数组等。useCallback只能缓存函数，它其实是useMemo的一个特例。

useMemo和useCallback的主要用途是优化性能和可读性。当我们有一些复杂的计算或者渲染，而且它们的结果只依赖于一些特定的变量时，我们可以使用useMemo或者useCallback来缓存这些结果，这样就不需要在每次渲染时重新计算或者渲染。这样可以提高性能，也可以让代码更清晰。

useRef 在存数据时也是缓存上一次页面执行时的数据，不会同步到当前页面，会有一种慢半拍的感觉

下面是一个用代码示例说明useMemo和useCallback的用法和主要用途：

import React, { useState, useEffect, useMemo, useCallback } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  // 使用useMemo来缓存一个复杂的计算结果
  const factorial = useMemo(() => {
    let result = 1;
    for (let i = 1; i <= count; i++) {
      result *= i;
    }
    return result;
  }, [count]); // 只有当count变化时，才重新计算

  // 使用useCallback来缓存一个函数
  const handleChange = useCallback((e) => {
    setName(e.target.value);
  }, []); // 只有当组件挂载时，才创建函数

  return (
    <div className="App">
      <h1>Factorial of {count} is {factorial}</h1>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
      <button onClick={() => setCount((c) => c - 1)}>-1</button>
      <hr />
      <h1>Hello, {name}</h1>
      <input type="text" value={name} onChange={handleChange} />
    </div>
  );
}

export default App;

如果我们不使用useMemo，那么每次我们输入名字或者点击按钮时，都会重新计算阶乘，这样就会浪费性能。

如果我们不使用useCallback，那么每次我们输入名字或者点击按钮时，都会重新创建函数，这样就会导致子组件（如果有的话）重新渲染，因为

函数的引用发生了变化。

另外useEffect函数也只能直接使用，不能类似 const factorial = useEffect() 这样的写法。