反应：为什么每次重新呈现时调用初始化器函数时，useState返回的状态保持不变？

Question

以下是现场演示：https://codesandbox.io/s/strange-bash-qj7ld?file=/src/App.js

所以我有一个这样的组件

const fn = () => {
  console.log("useState");
  return ["string"];
};

export default function App() {
  const [counter, setCounter] = useState(0);

  const [nonprimitive, setNonprimitive] = useState(fn());

  useEffect(() => {
    console.log("useEffect");
  }, [nonprimitive]);

  return (
    <>
      <button onClick={() => setCounter(counter + 1)}>Counter {counter}</button>
      <div>{nonprimitive[0]}</div>
    </>
  );
}

每次单击按钮时，计数器都会增加，组件将重新渲染。然后将再次调用fn（），然后它将返回一个数组。当非原语发生变化时，会触发useffect。我有两个问题：

1. 为什么只触发一次，而不是每次后续调用？非原语是一个数组，它是一个非原语类型，所以它应该每次都不同，即使它里面的字符串项保持不变。React似乎在幕后做了一些深入的比较。
2. 为什么每当组件重新呈现时，useState会打印两次？即console.log（useState）；当我按下按钮时，fn内的会被调用两次。

Answer 1

双重渲染是React的结果。严格模式：

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

• 类组件构造函数、呈现和shouldComponentUpdate方法

如果您删除，请做出反应。StrictMode从索引文件中，您将停止看到双重渲染。

至于useffect，您是正确的。有一种深刻的对比正在发生。React能够推断数组没有更改，除非数组的元素已更改。还要记住，提供给useState的任何内容都只在第一次渲染时设置，因此在调用setter之前，数组实际上不会更改，即使多次调用fn。

响应严格模式文档：https://reactjs.org/docs/strict-mode.html

Answer 2

为什么只触发一次，而不是每次后续调用？非原语是一个数组，它是一个非原语类型，所以它应该每次都不同，即使它里面的字符串项保持不变。反应似乎在幕后做一些深刻的比较。

useState的全部要点是在组件的呈现中持久化值。第一次组件呈现时，useState（fn（））被调用，non基元获取值["string"]。在随后的呈现中，useState（fn（））再次被调用（因为毕竟它仍然是一个标准函数调用，所以日志记录再次发生），但是React知道它不是你的第一次呈现，所以它丢弃了参数（返回值为fn），并返回先前存储的值，该值在引用上相同。

如果不希望在每次渲染时调用初始状态创建（例如，如果初始状态非常复杂或计算耗时），可以向其传递一个函数，该函数将仅在初始渲染时调用。

const [nonprimitive, setNonprimitive] = useState(() => fn());

在你的例子中，由于初始状态已经包装在函数中，你可以等价地写

const [nonprimitive, setNonprimitive] = useState(fn);

为什么每当组件重新呈现时，useState会打印两次？即console.log（useState）；内的fn在我按下按钮时被调用两次。

如果你查看你的索引。js，您会注意到您的应用程序组件包装在