15.1.使用useEffect模拟react三个生命周期

实现componentDidMount

useEffect的第二个参数，传入了一个[]，表示我们只需在页面初始化时候执行副作用，此处为发起请求

相当于class组件的componentDidMount

const Home: React.FC<Iprops> = () => {
  useEffect(() => {
    getList() // 调用方法发起异步请求
  }, [])；
  
 return (
      <div>
            hello world
      </div>
  )
}

实现componentDidUpdate

useEffect的第二个参数，传入[count]，只有count的值发生改变，执行副作用 此处为重新发起请求。count也可换成其他依赖项。

相当于class组件的componentDidUpdate

const Home: React.FC<Iprops> =() => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    getList();  // 调用发起异步请求
  }, [count])   // 仅在count更改时更新
  return (
      <div>
            hello world
      </div>
  )
}

实现componentWillUnmount

useEffect 第一个参数， return 一个函数，可以用来清除副作用

相当于class 组件的 componentWillUnmount

useEffect(() => {
    getList();
    return () => {
        console.log('组件注销, 实现componentWillUnmount');
    };
}, [])