JS中object的鎖定行為？

Question

每次單擊increment按鈕時：
期望：記錄當前count
現實： count的初始值，即 3 被記錄

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

function SomeLibrary(props) {
  const [mapState, setMapState] = useState(undefined);

  useEffect(() => {
    console.log("setting map");
    // Run exactly once at mount of component
    setMapState(props.map);
  }, []);

  useEffect(() => {
    if (mapState) {
      mapState.key();
    }
  }, [props]);

  return <div> ... </div>;
}

export default function App() {
  const [count, setCount] = React.useState(3);

  const map = { key: () => {
    console.log("fn", count);
  }};

  return (
    <div>
      Active count: {count} <br />
      <button onClick={() => {
          setCount(count + 1);
        }}
      >
        Increment
      </button>
      <SomeLibrary map={map} />
    </div>
  );
}

跑到這里

JS中的object初始化后會不會鎖住里面變量的值？

我想知道為什么 object 中的 function 在調用時不使用 count 的當前值但 React ref 在同一場景中獲取當前值的原因

我不明白為什么會這樣：
將 map 變量替換為：

const [count, setCount] = React.useState(3);
const stateRef = useRef();
stateRef.current = count;

const map = { key: () => {
  console.log("fn", stateRef.current);
}};

Answer 1

JS中的object初始化后會不會鎖住里面變量的值？

不。

您在安裝時有效地將 SomeLibrary 的SomeLibrary設置為初始值，並且不再更新該 state，因此它會不斷記錄其初始值。

const [mapState, setMapState] = useState(undefined);

useEffect(() => {
  console.log("setting map");
  // Run only once at mount of component
  setMapState(props.map); // <-- no other `setMapState` exists
}, []); // <-- runs once when mounting

通過簡單地將props.map添加到依賴數組中，此效果僅在map更新並正確更新 state 時運行。

useEffect(() => {
  console.log("setting map");
  // Run only once at mount of component
  setMapState(props.map);
}, [props.map]);

但是請注意， SomeLibrary 的SomeLibrary是App之后的渲染周期。 這是因為 SomeLibrary 中排隊的SomeLibrary更新的值在下一個渲染周期之前不可用。 在本地組件 state 中存儲傳遞的道具也是一種反模式（除了少數例外）。

為什么 React ref 在同一場景中獲取當前值？

const [count, setCount] = React.useState(3);
const stateRef = useRef();
stateRef.current = count; // <-- stateRef is a stable reference

const map = { key: () => {
  console.log("fn", stateRef.current); // <-- ref enclosed in callback
}};

當 react 組件 props 或 state 更新時，會觸發重新渲染。 useRef不是，它用於在渲染周期之間或通過渲染周期保存值，即它是一個穩定的 object 參考。 此引用包含在作為道具傳遞的 map object 中的回調 function 中。 當count state 在App中更新時，會觸發重新渲染並且stateRef.current = count; 更新存儲在 ref 中的值，即這類似於 object 突變。

另一個難題是功能組件總是在其父級重新渲染時重新渲染。 通過的map object 是一個新的 object 在通過 props 時。

正是這種重新渲染允許SomeLibrary運行第二個效果來調用非更新狀態回調mapState.key ，但是這次控制台記錄的 object 引用已經發生了變異。