react 函数组件 当一个状态变了要去使用use Effect 加依赖，而不能在函数里面写

在React函数组件中，当你需要监听某个状态变化并在特定条件下执行一些副作用操作，比如更新DOM、发送网络请求或订阅事件等，通常会使用`useEffect` Hook。这个Hook允许你在组件渲染后的任何时候运行指定的函数，并且可以让你控制哪些状态变化应该触发该函数。

`useEffect`的基本语法如下：

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

function FunctionComponent() {
  const [state, setState] = useState(initialValue);

  // 第一个参数是回调函数，第二个参数是依赖数组
  useEffect(() => {
    function handleStateChange() {
      // 在这里处理状态变化带来的副作用
    }

    if (stateHasChanged) {
      handleStateChange();
    }

    // 返回一个清理函数，用于在组件卸载时执行清理工作
    return () => {
      cleanupFunction();
    };
  }, [state]); // 仅当state改变时执行

  // 其他组件逻辑...
}

在这个例子中，如果你想在`state`变化时执行某些任务，你应该将`handleStateChange`函数作为第一个`useEffect`的回调，并将`state`作为依赖数组传递。只有当`state`在列表中时，`effect`才会再次运行。