react hook 系列useEffect

useEffect

• useEffect是一个封装后的钩子，可以实现类组件中的 componentDidMount componentDidUpdate componentWillUnmount的功能
• useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的componentDidMount、componentDidUpdate和componentWillUnmount具有相同的用途，只不过被合并成了一个 API

以下是替换componentDidMount componentDidUpdate写法

import React, { useEffect, useState } from "react";

function Counter() {
  let [state, setState] = useState({ number: 0 });
  //useEffect里的函数会在每次函数组件渲染的时候执行
  useEffect(() => {
    document.title = state.number + "";
  }, [state.number]);
  return (
    <div>
      <p>{state.number}</p>
      <button
        onClick={() =>
          setState((prevState) => ({ number: prevState.number + 1 }))
        }
      >
        +
      </button>
    </div>
  );
}

export default Counter;

以下可以替换componentWillUnmount的功能写法

useEffect(() => {
        let $timer = setInterval(() => {
            setState(prevState => ({ number: prevState.number + 1 }));
        }, 1000);
        return () => {
            clearInterval($timer);
        }
    }, []);