在初始渲染时为 refs 反应（挂钩）不同的值

Question

有人可以向我解释这种情况的原因是什么！

假设我有一个在初始渲染时生成随机值的函数。 然后我使用 ref 分配结果以在后续组件更新后保持值不变。 之后，我将 ref 值分配给某个状态。 状态用 setTimeout 中的 ref 值初始化。

import React, { useRef, useState } from "react";
import value from "./example";

function App(){

  const v = useRef(word());

  console.log(v.current); // Here for example the value is "test"

  setTimeout(() => {
    console.log(v.current); // Here the value is different
  }, 1000)

  const [state, setState] = useState(v.current);

  return (
    <div>{v.current}</div>
  )
}

我使用 setTimeout 来说明这种情况，但即使没有它，结果也是相同的，尽管没有组件更新，但状态将用不同的词创建。

尽管没有状态变化，组件在第一次初始化时渲染了多少次？

Answer 1

您正在以严格模式运行您的应用程序。 转到 index.js 并注释掉严格模式标签。 你会发现一个渲染。

这仅适用于开发模式。 生命周期不会在生产模式下被双重调用。

这是通过有意重复调用以下函数来完成的：

• https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects