react 重新渲染的條件是什么

Question

我不確定什么時候會重新渲染。 我沒有任何性能問題，我現在也沒有嘗試優化性能。 我只是對 react 何時重新渲染感到好奇。

據我所知，react 會在運行 useEffect 之前繪制所有內容，並且在 useEffect 運行后它會再次繪制。 這意味着它應該調用一次 NewLobby 的返回，然后調用一次 useEffect，然后調用一次 NewLobby，從而產生一個日志：

hello
rerun
hello

當我點擊刷新按鈕時，這也應該是正確的。

實際行為是不同的 => 頁面第一次加載控制台打印：

hello
hello
hello
rerun
hello

刷新按鈕按預期工作。 為什么還有2個重繪？

我的組件

import React, { useState, useEffect } from 'react';
import { BACKEND_URL } from 'GConfig';

const NewLobby = () => {
  const initialStateFactory = () => {
    return {
      loading: false,
      error: false,
      lobbies: 'Loading ...',
    };
  };

  const [lobbies, setLobbies] = useState(initialStateFactory());
  const [refresh, setRefresh] = useState(0);

  useEffect(() => {
    (async () => {
      const fetchLobbies = async () => {
        const result = await (
          await fetch(`${BACKEND_URL}/play/lobbies`, {
            method: 'POST',
            credentials: 'include',
          })
        ).json();
        return result;
      };
      const lobbies = await fetchLobbies();
      console.log('rerun');
      setLobbies(s => {
        return { ...s, lobbies };
      });
    })();
  }, [refresh]);

  return (
    <>
      <div>{console.log('hello')}</div>
      <button onClick={() => setRefresh(s => s + 1)}>Refresh</button>
    </>
  );
};

export default NewLobby;

Answer 1

我一般推薦使用Why did you render? 對於這類問題。 試一試，幾乎可以保證指出您的問題。