【react】慎用useLayoutEffect转而使用useEffect

由于useLayoutEffect钩子是在dom获得后、渲染组件前。因此，如果在useLayoutEffect中设置一些长耗时的，或者死循环之类的任务，会导致内存堆栈溢出。这时候需要转用useEffect。

// 适配全局宽度拉动变化时，legend显示数量
  React.useEffect(() => {
    const onResize = debounce(() => {
      let totalWidth = 0;
      const els = itemWrapRef.current;
      const spaceEl = spaceWrapRef.current;
      const { length } = options;
      let maxNum: number = length;
      let _noFullOpts = [...options];
      let isShow = false;
      els.forEach((el: any, index: number) => {
        // 累计宽度是否大于容器宽度，为了计算最大容个数
        if (el?.offsetWidth && spaceEl?.clientWidth) {
          const flag = totalWidth + el?.offsetWidth > spaceEl?.clientWidth;
          // console.log('width===>', spaceEl.clientWidth, totalWidth, flag);
          if (!flag) {
            maxNum = index + 1;
            totalWidth += el?.offsetWidth;
            isShow = false;
          } else {
            isShow = true;
          }
          if (length > 1) {
            _noFullOpts = options.slice(0, maxNum);
          }
        }
      });
      setIsShowMore(isShow);
      setNoFullOpts([..._noFullOpts]);
    }, 50);
    onResize();
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, [options]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36