為什么這個反應鈎子會導致無限循環？

Question

這段代碼會無限運行，但是不管去掉useValue(object)還是useTest()都會停止無限運行。 這整件事對我來說沒有意義，有人可以解釋一下嗎？

https://codesandbox.io/s/zen-currying-v2zu1?file=/src/App.js

import React from "react";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  // this code can also stop the infinite loop

  // const [object] = useState({
  //   name: "",
  //   personId: ""
  // });
  const object = {
    name: "",
    personId: ""
  };
  // strange thing: remove useValue or useTest can stop the ifinite loop
  useValue(object);
  useTest();
  // this console will run infinitely
  console.log(object);
  return <div className="App">{"123"}</div>;
}

export const useTest = () => {
  const [a, setA] = useState(1);
  useEffect(() => {
    setA(2);
  }, []);
};

const useValue = (value) => {
  const [a, setA] = useState(value);
  useEffect(() => {
    setA(value);
  }, [value]);
  // return a
};

Answer 1

確保記住您的 object 以便在依賴項中正確使用它。

const { useMemo } from 'react';

const object = useMemo(
  () => ({
    name: "",
    personId: ""
  }),
  []
);

無限循環背后的原因是因為您在 useEffect 的依賴數組中提供了一個非記憶的useEffect 。

Javascript 中的 Object 比較比僅比較obj1 === obj2更復雜，因為需要考慮一個參考。

在此處閱讀有關比較 javascript 中的對象的更多信息

Answer 2

因為object是引用類型，所以每次重新渲染App時它的標識都會改變。 在那里，您使用自定義掛鈎useValue並將object傳遞給它。 由於您還在useEffect的依賴數組中將其注冊為value ，因此將觸發useEffect ，設置新的 state，以重新渲染和循環結束。

1. 確保保存引用類型的標識（ useMemo或useCallback ）。
2. 閱讀有關useEffect的文檔。 它的行為很大程度上取決於你如何使用它的依賴數組。

Answer 3

因為您在依賴項中傳遞了 object。 useEffect with 做一個淺比較，所以它總是呈現。

有一些解決方案。 在這里閱讀。 您可以修改您的 useValue 掛鈎以使用 JSON.stringify，如下所示。

const useValue = (value) => {
    const [a, setA] = useState(value);
    useEffect(() => {
        setA(value);
    }, [JSON.stringify(value)]);
    // return a
};