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 引用已经发生了变异。