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);
  const [person, setPerson] = useState("zhang");
  // 写法一： 只要组件数据发生改变就会触发
  useEffect(() => {
    console.log("组件挂载或更新执行");
  });
  // 写法二； 首次只会触发第一遍， 组件销毁会执行return后的函数
  useEffect(() => {
    console.log("组件挂载执行");
    return () => {
      console.log("组件卸载之前执行");
    };
  }, []);
  //写法三: 指定数据改变执行
  useEffect(() => {
    document.title = 123 + "";
    return () => {
      document.title = data + "";
      console.log("组件卸载之前执行");
    };
  }, [data]);
  return (
    <>
      {data}
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        修改数据1
      </button>
      {person}
      <button
        onClick={() => {
          setPerson("zhang san");
        }}
      >
        修改数据2
      </button>
      <button onClick={() => ReactDom.unmountComponentAtNode("container")}>
        卸载container组件
      </button>
    </>
  );
};

export default App;