react: useEffect

可以吧useEffect看作是componentDidMount componentDidUpdate componentWillUnmount 三个函数的组合

在https://ant.design/components/button-cn 打开一个codesanbox， 替换下面代码

import React, { useEffect, useState } from "react";
import ReactDom from "react-dom";

const App: React.FC = () => {
  const [data, setData] = useState(1);
  useEffect(() => {
    console.log("组件挂载或更新执行");
  });
  useEffect(() => {
    console.log("组件挂载执行");
    return () => {
      console.log("组件卸载之前执行");
    };
  }, []);
  return (
    <>
      {data}
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        修改数据
      </button>
      <button onClick={() => ReactDom.unmountComponentAtNode("container")}>
        卸载container组件
      </button>
    </>
  );
};

export default App;