useEffect是什么

useEffect是Hooks的其中一个功能，用于控制组件的副作用。具体来说，它是用来实现“仅当某个值发生变化时才执行某个操作”的功能。

useEffect的使用方法

要使用useEffect，需要导入Hooks，如下所示。

import { useEffect } from "react";

以下是useEffect的语法结构。

useEffect(() => {
    /* 実行させたい処理を記述*/
}, [依存する変数の配列]);

在中国自然语言中，只需要一个选项：用箭头函数来描述第一个参数的处理，并且第二个参数必须指定为一个数组。如果要多次指定，则应该写成[num1, num2]的形式。

注意：useEffect在依赖数组中指定的值发生变化时，以及组件挂载（首次渲染）时都会被执行。因此，如果将第二个参数设置为[]，则可以编写只在显示组件的第一次时执行的逻辑。这在获取初始数据时经常使用。

useEffect的简单示例

如果只想在”num”狀態值發生改變時顯示警報，可以按照以下方式進行編寫。

import { useState, useEffect } from "react";

const App = () => {
    const [num, setNum] = useState(0);

    const onClickButton = () => {
        setNum(num + 1);
    };

    useEffect(() => {
        alert();
    }, [num]);

    return (
        <div>
            <button onClick={onClickButton}>ボタン</button>
            <p>{num}</p>
        </div>
    );
};

最终

非常感谢你阅读到这里！这次只是涵盖了关于useEffect基本的部分，关于其他渲染优化的内容，我将另外发布一篇文章，在那篇文章中你可以参考。