使用useEffect模拟一些常用的生命周期钩子

222 字

1 分钟

使用useEffect模拟一些常用的生命周期钩子

2023-11-02

前端

React

一、模拟 `componentDidMount`#

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

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

二、模拟`componentDidUpdate`#

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

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

CAUTION
注意，这种写法谨慎使用，以确保你的代码按照你的预期执行。下面是一种错误的用法，会令程序陷入死循环💥：

1
useEffect(() => {
2
  fetch("https://api.test.com/list")
3
    .then((res) => res.json())
4
    .then((data) => setList(data));
5
});
6

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

三、模拟 `componentWillUnmount`#

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

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