关于使用`useEffect`的依赖数组的选择

概括

在React Hooks中，useEffect是一个用于执行副作用（例如获取数据、订阅或手动修改DOM等）的Hook。本文将详细解释如何正确使用useEffect的依赖数组。

基础用法

首先，让我们来看一下 useEffect 的基本使用方法。

"use client";
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上述代码中，每次点击按钮时，count状态都会被更新，这将触发useEffect。然后，document.title会被更新。换句话说，它会在每次渲染后触发。

只有特定的值发生变化时才希望触发。

但是，如果不想在每次渲染后都执行副作用，应该怎么办呢？在这种情况下，可以使用 useEffect 的第二个参数，依赖数组。

"use client";
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // この行に注目

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上述代码中，我们将[count]作为useEffect的第二个参数。这意味着只有当count状态发生变化时，才会执行useEffect内的副作用。

只想在首次渲染时触发

只有当组件挂载（首次渲染）时，才会执行`useEffect`内的副作用。这在只想在组件首次显示在屏幕上时执行特定操作时非常有用。

例如，通常情况下，数据获取等操作只在组件挂载时执行一次。

"use client";
import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // この行に注目

  return (
    <div>
      {data ? `Fetched data: ${data}` : 'Fetching data...'}
    </div>
  );
}

在上述的代码中，我们将[]作为第二个参数传递给useEffect。这意味着组件仅在挂载时从/api/data获取数据。

总结

通过使用依赖数组，可以仅在特定状态或属性更改时执行副作用。这样可以防止不必要的副作用执行，并提高性能。

考試準備

这篇文章大约有70%是由GPT4写的作为试验。