使用 useCallback、useMemo 和 useEffect

React 提供了一些 hooks，如 useCallback、useMemo 和 useEffect，让我们能够更有效地编写 React 组件。本文将介绍这些 hooks，并讨论何时使用它们。

useCallback

当在渲染期间创建函数并将其传递给子组件时，该子组件将在每次渲染时都会接收到新的函数引用，这可能会影响性能。这时可以使用 useCallback，它将返回一个 memoized 版本的回调函数。

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    onClick("clicked");
  }, [onClick]);

  return <button onClick={handleClick}>Click me</button>;
}

上面的例子中，每次渲染 MyComponent 都会创建一个新的 handleClick 函数。使用 useCallback 可以让 handleClick 在 onClick 没有改变时，保持不变。 useCallback 接收两个参数：callback 和 dependencies。当 dependencies 中的值发生变化时，callback 才会被重新创建。

useMemo

当有一个昂贵的计算，可通过 useMemo 让组件在渲染期间只计算一次。当下次渲染时，将返回计算结果。

import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const result = useMemo(() => a + b, [a, b]);

  return <div>{result}</div>;
}

上面的例子中，当 a 或 b 发生变化时，result 才会重新计算。如果 a 和 b 没有发生变化，则应返回的是上次计算结果。

useEffect

当需要在组件挂载、卸载或更新时执行一些副作用代码时，可以使用 useEffect。useEffect 会根据给定的依赖项，决定何时执行渲染副作用:

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

function MyComponent({ name }) {
  const [message, setMessage] = useState("");

  useEffect(() => {
    setMessage(`Hello ${name}`);
  }, [name]);

  return <div>{message}</div>;
}

上面的例子中，useEffect 中的函数会在组件挂载和 name 更新时调用。如果不传递第二个参数给 useEffect ，则在组件挂载和更新时都会触发该副作用代码。

结论

在编写 React 组件时， useCallback 、 useMemo 和 useEffect 是提高性能和代码质量的利器。只有当必要的情况下才应该使用它们，避免过早优化。