reactjs 为什么useEffect在组件重新渲染之前运行？

xjreopfe 于 2023-02-15 发布在 React

关注(0)|答案(2)|浏览(250)

我是新的React，这是一个非常简单的计数器，递增值为5，我了解到useEffect是在每个组件重新渲染/依赖变量更改后执行的。但我发现useEffect（即警报）是在h1中的值更改前出现的

import { useEffect, useState } from "react";

export default function App() {
const [number, setNumber] = useState(0);

  let prev = 0;

  useEffect(() => {
    if (number !== 0) {
      alert("Number changed to " + number);
    }
  }, [prev, number]);

  console.log(prev);

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber((n) => {
            prev = n;
            return n + 5;
          });
        }}>
        +5
      </button>
    </>
  );
}

预期结果：h1值递增5后发生警报
当前结果：警报先出现，警报关闭后h1值递增

reactjs

来源：https://stackoverflow.com/questions/75449303/why-is-useeffect-running-before-component-re-render

2条答案

按热度按时间

2izufjch1#

此时将运行useEffect：

useEffect(() => {
  /* Runs at every (First time, and anytime the component is rendered) render! */
})

useEffect(() => {
  /* Runs only when the component is rendered for the first time! */
}, [])

useEffect(() => {
  /* Runs when the component is rendered for the first time and whenever the someDependency is updated! */
}, [someDependency])

因此，在您的情况下，它会在组件第一次呈现时、编号更改时以及prev更改时运行。另外，不要像现在这样更改prev，这将导致无限循环！

赞(0）回复(0）举报 2023-02-15

7xzttuei2#

useEffect的运行方式基本上与componentDidMount类似，
因此它在安装组件后第一次运行，然后在每次重新渲染后运行

赞(0）回复(0）举报 2023-02-15