Question

我不确定何时重新渲染。我没有任何性能问题，也没有立即尝试优化性能。我只是想知道什么时候反应会重新渲染。

据我所知，react将在运行useEffect之前绘制所有内容，而在useEffect运行之后将重新绘制内容。这意味着它应该调用一次NewLobby的返回，然后一次使用一次Effect，然后一次调用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?。旋转一下，几乎可以指出您的问题。

对重新渲染做出反应的条件是什么

我的组件

1 个答案: