时间戳

首页 > 解决方案 > 想知道为什么组件更新时会执行componentWillUnmount

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

问题描述

应用程序.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 按钮时，组件重新渲染，然后在浏览器控制台中打印

组件将卸载

组件确实更新了

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

标签： reactjsuse-effect

解决方案

因为当你改变一个组件的状态时，React 会重新渲染整个组件。所以会先卸载旧组件，触发useEffect中的return回调。当一个新组件被挂载时，useEffect 内部的逻辑将再次被触发，因此在“组件将卸载”消息之后您会看到“组件确实更新”。更多关于 useEffect的信息 `useEffect` 的预期回报是什么？.

推荐阅读