乐趣区

关于react.js:盘点那些-React-Hooks-里常见的问题

jiezi

原文：https://juejin.cn/post/697243…
作者：Tonychen

Infinite Chain Of Update

理论应用中有时候会碰到 Infinite Chain Of Update 这个报错，其实就是你的一段代码引发了「死循环更新」。上面咱们来看几个例子👇

依赖数组问题

比如说在应用 useEffect 时没有传入依赖数组👇

// count 会有限 + 1
function App() {const [count, setCount] = useState(0)

    useEffect(() => {setCount(count + 1)
    })
}

为什么说 count 会有限更新？这里的逻辑是这样的👇

  • 组件更新
  • 执行 useEffect
  • 更新 count 并触发组件更新
  • 执行 useEffect
  • ……

解决办法很简略，只有给 useEffect 传一个空数组作为第三个参数，下次更新时 useEffect 便不会执行。

// 失常渲染
function App() {const [count, setCount] = useState(0)

    useEffect(() => {setCount(count + 1)
    }, [])
}

监听了被更新的值

这个算是老手 hooks 玩家常常会遇到、新手也有些头疼的问题。

  • 案例 1

useEeffect 中更新的 state 间接影响了被监听的变量，举个例子🌰

function App() {const [obj, setObj] = useState({a: 0})
    const {a} = obj
    useEffect(() => {
        setObj({
            ...obj,
            a: 1
        })
    }, [a, obj])
}

下面这段代码在理论运行的时候就会导致死循环，为什么呢？因为在 setObj 的时候扭转的是 obj 这个值，而 useEffect 监听了这个值，从而 导致了死循环……

怎么解决呢？因为是 obj 变动引起的 infinite loop，那么其实只有不监听 obj 就没有这回事了

🤪，这里能够利用一下 setState 的「回调函数」用法👇

function App() {const [obj, setObj] = useState({a: 0})
    const {a} = obj;
    useEffect(() => {setObj((state) => ({
            ...state,
            a: 1
        }))
    }, [a])
}
  • 案例 2

有时候你须要依据不同的「状态」来决定组件显示什么，那么通常就须要利用一个 state 来管制若干种「状态」的显示，从状态 1 到状态 2 的转化是异步的。一个简略的做法就是用 useEffect 来监听它。

如果说这个状态有一部分依赖内部传入，另外一部分依据这个内部传入的状态的变动来进行对应的解决。举个例子👇

export function App({outsider, wait}) {const [state, setState] = useState('INIT')
    useEffect(() => {
        // 依据 ousider 解决 state 的值
        if (outsider === true) {setState('PENDING')
        } else {if (state === 'PENDING') {setTimeout(() => {setState('RESOLVED')
                }, wait)
            }
        }
    }, [outsider, state])
    return (// 依据 state 来渲染不同的组件 / 款式)
}

理论运行起来的话又是 infinite loop 了，可能你第一工夫我想的一样，就是采纳「案例 1」的解法。然而留神，这里是有异步解决的，所以这里只能说是利用 useRef 来做一下简略的解决。

export function App({outsider, wait}) {const [state, setState] = useState('INIT')
    const stateRef = useRef(state)
    useEffect(() => {
        // 依据 ousider 解决 state 的值
        if (outsider === true) {setState('PENDING')
            stateRef.current = 'PENDING'
        } else {if (stateRef.current === 'PENDING') {setTimeout(() => {setState('RESOLVED')
                    stateRef.current = 'RESOLVED'
                }, wait)
            }
        }
    }, [outsider])
    return (// 依据 state 来渲染不同的组件 / 款式)
}

这样一来在 useEffect 中就不须要依赖 state，而且可能依据 state 以后的值做出一些操作😄

小结

在写 hooks 的时候，须要常常留神代码中是否有依赖 state 且 setState 的中央，通常直觉上的写法是会带来 infinite loop 的。

获取不到最新的值

老手 hooks 常常会碰到这类问题，上面是一个简略的例子👇

import {useCallback, useEffect, useState} from "react";

let timeout = null;
export default function App() {const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {setCount(count + 1);
    timeout = setTimeout(() => {console.log("timeout", count);
      setCount(count + 1);
    }, 1000);
  }, [count]);

  useEffect(() => {return () => {clearTimeout(timeout);
    };
  }, []);

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={handleClick}>click me</button>
    </div>
  );
}

运行之后你会发现，每次 console.log 打印进去的都是上一次 count + 1 前的后果，而这其实就和 useState 实现有关系了，这里仅截取源码中的一小部分实现👇

能够看出，从 useState 中解构进去的是原数据的值而非援用，所以在下面的例子中，在 setTimeout 里拿不到最新的 count 值。

参考资料

Setting State based on Previous State in useEffect – Its a trap!

退出移动版