【React Hooks】关于useEffect

我阅读了公式文档和文章，但由于不理解，所以写了下来。

useEffect是什么意思？

这是用于在函数组件内执行副作用（Side Effect）的钩子，在React Hooks中提供。

副作用是指与函数组件的输出（渲染）无关的操作，如DOM更新、数据获取、日志记录等。通过使用useEffect，可以将渲染和副作用分开处理。

以下是语法。

useEffect(() => {
  /* 実行させたい副作用関数 */
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 副作用関数の実行タイミングを制御する依存データを記述

行为

当第二个参数中的任何元素被创建或更新时，useEffect钩子会执行第一个参数中的处理代码。

useEffect(() => {
  console.log(`filter ステートが更新された: ${filter}`);
}, [filter]);

此外，在useEffect内引用的外部变量和函数被称为第二个参数数组的”依赖数组”。

一个选项:

当数组为空时，只有在组件挂载时才执行第一个参数的操作。如果省略该数组本身，副作用将始终被执行。

useEffect(() => {
  console.log(`コンポーネントがマウントされた`);
}, []);

一个使用情境

DOM的更新：如果需要操作DOM，则在组件渲染之后需要对DOM进行操作。
数据获取：从API获取数据，并根据该数据更新组件。
事件监听器：为特定事件（例如窗口大小变化）设置监听器，并在该事件发生时更新组件。

通常情况下，当我们想在 React 更新了 DOM 之后执行某些附加代码时，可以使用 useEffect 钩子。

useEffect的用法示例

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

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

  // レンダリング後に実行される
  useEffect(() => {
    document.title = `${count} clicks`;
  });

  return (
    <>
      <p>{count} clicks</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </>
  );
}