reactjs - 想知道为什么组件更新时会执行 componentWillUnmount

Question

App.js

import React from "react";
import CounterOne from "./CounterOne";
function App() {
  const [display, setDisplay] = React.useState(true);
  return (
    <>
      {display && <CounterOne />}
      <button
        onClick={() => {
          setDisplay(!display);
        }}
      >
        display
      </button>
    </>
  );
}

export default App;

CounterOne.js

import React, { useState } from "react";

function CounterOne() {
  const [count, setCount] = useState(0);
  React.useEffect(() => {
    console.log("component did update");
    return () => {
      console.log("component will unmount");
    };
  }, [count]);

  return (
    <div>
      <p>Count is {count}</p>
      <button
        onClick={() => {
          setCount(0);
        }}
      >
        reset
      </button>
      <button
        onClick={() => {
          setCount(count + 5);
        }}
      >
        Add 5
      </button>
      <button
        onClick={() => {
          setCount(count - 1);
        }}
      >
        Sub 1
      </button>
    </div>
  );
}

export default CounterOne;

当我点击 Add 5 或 sub 1 按钮时，组件重新呈现然后在浏览器控制台中打印

组件将卸载

组件更新

我很困惑为什么在状态更新发生时卸载部分会执行

Answer 1

因为当你改变一个组件的状态时，React 会重新渲染整个组件。所以旧组件会先卸载，触发useEffect中的return回调。当挂载一个新组件时，useEffect 中的逻辑将再次被触发，因此您会在“组件将卸载”消息之后看到“组件已更新”。更多关于 useEffect 的信息 What is the expected return of `useEffect` used for? .