Javascript 在React中延迟组件渲染的首选设计模式是什么？

当前，我正在通过将状态

readyToRender

初始化为false并在获得呈现UI所需的数据后将其设置为true来推迟组件的呈现

我的渲染函数类似于：

if (this.state.readyToRender) {
  return (
    // render component
)} else {
  return false; // don't render component
}

这是解决此问题的正确模式还是有更好的方法解决此问题？
相关问题：

---

首先，我们尝试从数据中导出“已加载”状态，而不是将其保存在

这个.state

中。虽然数据不可用，但我们显示一个微调器，但您也可以不显示任何内容

例如：

const TextShower = (props) => {
  if (props.text) {
    return <div>{props.text}</div>
   }

   return <img src='https://s31.postimg.org/g3992fx7v/477.gif' />
}

const TextShower=（道具）=>{
如果（道具文本）{
返回{props.text}
}
返回
}

小提琴：

我们还创建了一个高阶组件来处理此问题（加载程序映像已更改，因此示例可以正常工作）：

const loaderComponent=（ComposedComponent，谓词）=>{
返回（道具）=>{
常量isLoading=谓词和谓词（props）
如果（正在加载）{
返回
}
返回
}
}

用法：

const TextShower = (props) => { 
  return <div>{props.text}</div>   
}

const LoaderTextShower = loaderComponent(TextShower, 
                                         (props) => !props.text)

const TextShower=（道具）=>{
返回{props.text}
}
常量LoaderTextShower=loaderComponent（TextShower，
（道具）=>！props.text）

小提琴：

从“反应中思考”文档：

您可以根据组件中的任何其他状态或道具来计算它吗？如果是这样，那就不是州政府了

---

您的数据是否在道具中？此逻辑非常好。我的数据当前存储在

This.state

中，但设计当然也可以重新进行，以便我将数据作为道具传递。即使您的数据处于状态，请尝试从现有数据中计算readyToRender，而不是创建另一个布尔值。谢谢，我将通过传递道具而不是从状态设置来以这种分层方式构建UI。如果这个答案得到更多的选票，或者得到社区的一致同意，成为解决这个问题的首选方式，我会将其标记为接受。

const TextShower = (props) => { 
  return <div>{props.text}</div>   
}

const LoaderTextShower = loaderComponent(TextShower, 
                                         (props) => !props.text)