React.useMemo 與 React.useState

Question

我看到其他人詢問useState + useEffect 。 但我想知道這兩個實現中未更改的（const）變量有什么不同：

function optionA(){
  const [Mesh]  = useState(()=> new Mesh)
  
 return "...someRender"
}

function optionB(){
 const Mesh = useMemo(()=> new Mesh)

 return "...someRender"
}

編輯：

我知道useRef(someValue)更適合這個，但我發現它“不明確地”在任何地方寫Mesh.current

Answer 1

關鍵是你說“不變”的地方。 在 state 中設置一個永遠不會改變的值是沒有意義的。 state 的目的是保存信息，這些信息在更改時會導致渲染更新。 如果你從不改變它，就沒有理由把它放在 state 中。

但是，不要為此使用useMemo 。 從文檔中：

您可能依賴 useMemo 作為性能優化，而不是語義保證。 將來，React 可能會選擇“忘記”一些以前記憶的值並在下一次渲染時重新計算它們，例如為屏幕外組件釋放 memory。 編寫您的代碼，使其在沒有useMemo的情況下仍能正常工作——然后添加它以優化性能。

（他們的重點）

如果您有想要在組件的整個生命周期內靜態保存的信息，請使用useRef而不是useMemo ：

function Example() {
    const refMesh = useRef(null);
    if (!refMesh.current) {
        // One-time initialization
        refMesh.current = new Mesh();
    }
    const mesh = refMesh.current;
    // ...use `mesh` from here on out...
}

與useMemo不同，您可以確定在組件的生命周期內只會創建一個Mesh實例。 （這還有一個小優點，即您不必不斷創建 function 來在每次渲染時傳遞useMemo 。）

我有時會使用存儲 object 的單個 ref 來保存不適合 state 的多條實例信息（包括子組件的穩定回調函數）。 這很方便。

---

重新編輯：

我知道useRef(someValue)更適合這個，但我發現它“不明確地”在任何地方寫Mesh.current

你不知道。 見const mesh = refMesh.current; 在上面，您將在整個組件的其余部分使用mesh而不是refMesh.current 。

如果你發現if很尷尬，你可以將它包裝在一個鈎子中，它提供了useMemo不提供的語義保證，代價是在每個渲染上創建一個 function（與useMemo ， useCallback等）：

const useData = (instanceInitializer) => {
    const ref = useRef(null);
    if (!ref.current) {
        ref.current = instanceInitializer();
    }
    return ref.current;
};

那么它將是：

function Example() {
    const mesh = useData(() => new Mesh());
    // ...use `mesh` from here on out...
}

與 function 的創建相比，這有（非常）輕微的額外成本，但更好的人體工程學。