props更新后组件重渲染及异步初始化对象的处理咨询

1. 用React状态追踪Faeko实例与就绪状态 #

把Faeko实例和初始化状态存入React状态，这样实例更新时会自动触发组件重渲染，子组件也能拿到最新值。

比如在父组件（如<Main>）中：

import { useState } from 'react';

function Main() {
  const [faeko, setFaeko] = useState(null);
  const [isFaekoReady, setIsFaekoReady] = useState(false);

  // 处理用户名提交后的Faeko初始化
  const handleUsernameSubmit = (username) => {
    const newFaeko = new Faeko({ username }, client);
    
    // 利用Faeko的初始化完成回调更新状态
    newFaeko.on('initialized', () => {
      setFaeko(newFaeko);
      setIsFaekoReady(true);
    });
  };

  return (
    <div>
      <UsernameInput onSubmit={handleUsernameSubmit} />
      <GameFrame faeko={faeko} isReady={isFaekoReady} />
    </div>
  );
}

2. 子组件处理未就绪状态 #

在<GameFrame>中先判断就绪状态，未完成时显示加载占位，避免访问undefined属性报错：

function GameFrame({ faeko, isReady }) {
  if (!isReady) {
    return <div>加载中...</div>; // 可替换为骨架屏或自定义占位组件
  }

  // 就绪后正常访问Faeko内部属性
  return <div>当前玩家: {faeko.playerInfo.name}</div>;
}

3. 监听Faeko内部属性动态更新（可选） #

如果Faeko初始化后还会动态修改内部属性，需要监听变化并同步到React状态，确保组件实时重渲染：

import { useState, useEffect } from 'react';

function Main() {
  const [faeko, setFaeko] = useState(null);
  const [isFaekoReady, setIsFaekoReady] = useState(false);

  // ... 用户名提交逻辑 ...

  useEffect(() => {
    if (!faeko) return;

    // 监听Faeko内部属性变化事件
    const handlePropertyUpdate = () => {
      // 通过浅拷贝触发引用变化，强制组件重渲染
      setFaeko({ ...faeko });
    };

    faeko.on('propertyChange', handlePropertyUpdate);
    return () => faeko.off('propertyChange', handlePropertyUpdate);
  }, [faeko]);

  // ... 渲染逻辑 ...
}

关键注意点 #

• 不要在组件渲染函数内创建Faeko实例，否则每次渲染都会重复初始化，应放在事件处理函数或useEffect中。
• 优先使用Faeko提供的初始化完成回调/事件，轮询检查属性是否就绪是性能较差的兜底方案。
• 若Faeko实例引用不变但内部属性更新，需通过状态更新（如浅拷贝实例、拆分单独属性存状态）触发React重渲染。

内容的提问来源于stack exchange，提问作者Nyanjan