关于Hook踩坑

发表于 | 分类于
本文字数： 4.1k | 阅读时长 ≈ 7 分钟

最近在维护一个小项目，然后既然 Hook 是大势所趋总不能不用吧。
记录一些遇到的 error。

前置条件是这样的，本来自己配了一个 webpack，之前也一直玩的很开心。
但是使用到的数据量/图片量越来越大，以及确实对于 webpack 不是很熟悉，遇到了一堆奇奇怪怪的问题和不方便的地方。
所以重新用 create-react-app 创建了一个项目来进行移植，然后 Eslint 就站出来骂我了(1551

抱歉，俺太弱了

参考链接

什么是 Hook:
Hook 简介

遇到了问题：
stackOverFlow

React Hook “useEffect” is called conditionally.

React Hook “useEffect” is called conditionally. React Hooks must be called in the exact same order in every component render.eslint(react-hooks/rules-of-hooks)

问题代码
1
2
3
4
5
6
7
8
9
10
11
12
13
isNow &&
  useEffect(() => {
    interval = setInterval(() => {
      if (schedule) {
        let endTime = moment.unix(schedule.end_time);
        let diff = endTime.diff(moment());
        setRemainTime(formatDuring(diff));
      }
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  });

报错明说，useEffect 不应该有条件的使用。
也就是我在使用 useEffect 的时候加了一判断条件 isNow，这是不被接受的。

修正代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
useEffect(() => {
  if (isNow) {
    interval = setInterval(() => {
      if (schedule) {
        let endTime = moment.unix(schedule.end_time);
        let diff = endTime.diff(moment());
        setRemainTime(formatDuring(diff));
      }
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }
});

把判断条件添加到 useEffect 里面就可以了。

Accepts a function that contains imperative, possibly effectful code.

React Hook useEffect contains a call to ‘setSelected’. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [pathname] as a second argument to the useEffect Hook.

算是一个 warning。

问题代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
useEffect(() => {
  switch (pathname) {
    case "/":
      setSelected("salmonRun");
      break;
    case "/turfWar":
      setSelected("turfWar");
      break;
    case "/rankBattle":
      setSelected("rankBattle");
      break;
    case "/leagueBattle":
      setSelected("leagueBattle");
      break;
    case "/splatNetGear":
      setSelected("splatNetGear");
      break;
    default:
      setSelected(null);
  }
});

提示说在 useEffect 这个 hook 里调用了 setSelected，没有给定 dependences 列表，可能会导致无限更新，添加 useEffect 的第二个参数来解决这个问题。

React 官网对于 useEffect 的第二个参数的解释

如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可。

所以算是一种性能优化（如果是类组件，需要在 componentDidUpdata 里进行判断来做些操作），而在 useEffect 里如果给的值没有变动，则会直接调用第二个参数。

修正代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
useEffect(() => {
  switch (pathname) {
    case "/":
      setSelected("salmonRun");
      break;
    case "/turfWar":
      setSelected("turfWar");
      break;
    case "/rankBattle":
      setSelected("rankBattle");
      break;
    case "/leagueBattle":
      setSelected("leagueBattle");
      break;
    case "/splatNetGear":
      setSelected("splatNetGear");
      break;
    default:
      setSelected(null);
  }
}, [pathname]);

在 useEffect 内使用计时器问题

Assignments to the ‘interval’ variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the ‘.current’ property. Otherwise, you can move this variable directly inside useEffect.

问题代码
1
2
3
4
5
6
7
8
9
let interval;
useEffect(() => {
  interval = setInterval(() => {
    remainTime = moment.unix(end_time).diff(moment(), "minutes");
  }, 60000);
  return () => {
    clearInterval(interval);
  };
});

提示里说每次渲染之后 useEffect 都对 interval 这个变量都会丢失，所以要保留的话建议使用 useRef 并保留在 current 属性里。

虽然建立用了 useRef，但是解决方法如下：

第一次修正
1
2
3
4
5
6
7
8
useEffect(() => {
  let interval = setInterval(() => {
    remainTime = moment.unix(end_time).diff(moment(), "minutes");
  }, 60000);
  return () => {
    clearInterval(interval);
  };
});

直接在 useEffect 里声明 interval 变量。（其实有点不太确定会不会有问题，至少使用起来 ok 的。

然后针对定时器改变的 remainTime 也报了一样的错误。
还是不使用 useRef。因为 remainTime 是一个变量，所以老老实实地用 useState 就好了。

第二次修正
1
2
3
4
5
6
7
8
9
10
11
let [remainTime, setRemainTime] = useState(
  moment.unix(end_time).diff(moment(), "minutes")
);
useEffect(() => {
  let interval = setInterval(() => {
    setRemainTime(moment.unix(end_time).diff(moment(), "minutes"));
  }, 60000);
  return () => {
    clearInterval(interval);
  };
});
0%