javascript - React 重新渲染的条件是什么

Question

我不确定 react 何时重新渲染。我没有任何性能问题，我现在也没有尝试优化性能。 我只是好奇 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?对于这类问题。试一试，几乎肯定会指出你的问题。