在初始渲染時為 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