React JS最佳实践

Question

我计划使用我的状态作为一种信号形式，我将来回改变以显示我的加载屏幕、主窗体和成功或错误消息。但不确定这是否是最佳实践。下面是一个示例代码

div hidden={this.state.FormStatus.statusMode !== "Loading"}>
          <LoadingScreen />
        </div> 

div hidden={this.state.FormStatus.statusMode !== "Main"}>
          <MainForm/>
        </div> 

但我不确定这是否是最好的方法，我担心这会减慢我的应用程序或消耗客户机的CPU。你能推荐更好的方法吗？

Answer 1

不确定性能改进如何超过你正在做的事情，但这里有一个想法。

render() {
  const { FormStatus: { statusMode } } = this.state;
  const component = { Loading: <LoadingScreen />, Main: <MainForm /> };

  return component[this.state.FormStatus.statusMode];
}

记录在案，你现在做的很好。唯一真正的改进是只渲染一个div，而不是两个。

Answer 2

render() {
  const { statusMode } = this.state.FormStatus;

  if (statusMode === 'Loading') {
    return <LoadingScreen />;
  } else if (statusMode === 'Main' {
    return <MainForm />;
  }
}

或

render() {
  const { statusMode } = this.state.FormStatus;

  return (
    <div>
      <span>Something you want to display no matter what</span>
      {statusMode === 'Loading' && <Loading />}
      {statusMode === 'Main' && <Main />}
    </div>
  );
}