求star

一、模拟 componentDidMount#

这个副作用仅在组件第一次挂载的时候执行一次

useEffect(() => {
  // do something ...
}, []);

二、模拟componentDidUpdate#

这个副作用仅在组件更新后执行

useEffect(() => {
  // do something ...
});

useEffect(() => {
  fetch("https://api.test.com/list")
    .then((res) => res.json())
    .then((data) => setList(data));
});

// 1.由于每次更新后都会执行副作用函数，发起请求，更新list
// 2.由于list更新 => 视图更新 => 再次触发重新发起请求... => 陷入死循环

三、模拟 componentWillUnmount#

useEffect(() => {
  // do something 比如注册一个定时器
  const timerId = window.setInterval(() => {
    console.log("test");
  }, 1000);

  // 返回一个函数，模拟 componentWillUnmount
  return () => {
    // 组件销毁时清除定时器
    window.clearInterval(timerId);
  };
}, []);