react 中的依赖循环

出现依赖循环的代码

function sum(a, b) {
  return { sum: a + b };
}
export const Test = () => {
  const obj = sum(a, b); // 不只是对象，数组也会出现这种情况
  const [num, setNum] = useState(0);

  useEffect(() => {
    setNum(num + 1);
  }, [obj]);

  return <div>{num}</div>;
};
123456789101112131415;

现象：num 值不断快速的递增
原因：将 obj 作为依赖数组中的一员，setNum 执行一次后，会再次从头开始执行代码，但是 obj 的内存值已经发生变化，就导致 setNum 不断执行，依赖数组失效。

解决依赖循环的方法

• 使用 useMemo，和 React.memo 要区分开来，React.memo（和之前class API中提供的ShouldComponentUpdate基本一致）主要是为了在父组件渲染时防止对没有状态变化的子组件进行不必要的渲染。

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  useMemo 返回一个 memoized 值，只有在依赖项改变时才会执行函数，重新计算这个 memoized 值，这个 memoized 值就是解决依赖循环的关键，传给 useMemo 的函数是在渲染期间运行的

  const obj = useMemo(() => sum(a, b), [a, b]);
  1;
  

• 使用 useCallback

useCallback() 相当于 useMemo() 的函数版本，它返回一个 memorized 回调函数，该回调函数只会在某个依赖项改变时才会更新。

const obj = useCallback(() => sum(a, b), [a, b]);
1;

• 使用 useRef()
useRef ·会在每一次渲染都返回同一个 ref 对象，并且其对象的 current 属性保存的是最新的计算值；
  变更 .current 属性不会引发组件的重新渲染

  const obj = useRef({});
  useEffect(()=>{
  	obj.current = sum(a, b)
  }, [a,b])
  1234
  

• 使用 useState

使用 useState 也可以

const [obj, setObj] = useState({});
1;