useEffect 钩子怎么可能改变 state，条件是改变相同的 state？

Question

我有一个 useEffect 钩子，如果标题等于 project.name，它会禁用：

    useEffect(() => {
        if (title === project.name) {
          setDisabled(false);
        } else {
          setDisabled(true);
        }
      }, [disabled]);

这工作正常，但我不明白它是如何工作的。 据我了解，useEffect 钩子的第二个参数指定了需要更改才能产生效果的变量。 disabled在代码中的任何其他地方都没有更改，而不是在效果本身中。

从我的逻辑来看，这意味着 disabled 永远不会改变，因为条件先于效果。

Answer 1

在您的情况下发生的事情是您的应用程序被渲染了两次！

事实上，对于每一个副作用（例如，数据获取、手动更改 DOM 等），您的应用程序都将被重新渲染，这将调用钩子 (useEffect)。

即使您在一个效果内设置状态，效果也始终在渲染阶段完成后执行，另一个效果将读取更新的 state 并仅在渲染阶段后对其执行操作。

useEffect 类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

setState（即setDisabled）也将重新渲染应用程序，因此您将重新执行useEffect 挂钩。

但

如果调用 setState 时的值与以前相同，则不会重新渲染 function 组件（不会调用 function 组件）。

设想：

1. 在第一次渲染时，title.== project,name（假设是这样）。 所以我们将进入 (title,== project.name) 块代码，我们将调用setDisabled(true) ...最后一次调用将再次重新渲染应用程序。

2. 在第二次渲染时，现在我们有了 title === project.name，所以我们将进入 (title === project.name) 块代码，我们将调用setDisabled(false) ...这个调用也会重新再渲染一次应用程序。

3. 现在，由于我们已经设置了 title === project.name，所以我们将再次进入 (title === project.name) 的块代码，我们将调用setDisabled(false) ，但具有相同的值，所以应用程序不会再次重新渲染！

Answer 2

如果您想更改禁用，也许您需要听到“标题”，useEffect 挂钩的第二个参数指定了需要听到的变量以使效果发生。

useEffect(() => {
  if (title === project.name) {
    setDisabled(false);
  } else {
    setDisabled(true);
  }
}, [title]);