什么是延迟react中组件渲染的首选设计模式

Question

我当前正在通过将状态 readyToRender初始化为false的组件渲染，然后将其设置为true，一旦我拥有渲染UI所需的数据。

我的渲染功能看起来像：

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

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

• React组件的延迟渲染
• 反应延迟渲染

Answer 1

首先，我们尝试从数据中得出"已加载"状态，而不是将其保存在this.state中。虽然数据不可用，但我们显示一个旋转器，但您不妨什么也没有显示。

所以：

const TextShower = (props) => {
  if (props.text) {
    return <div>{props.text}</div>
   }
   return <img src='https://s31.postimg.org/g3992fx7v/477.gif' />
}

小提琴：https：//jsfiddle.net/omerts/8r3dh6hw/

我们还创建了一个高阶组件来照顾这个（更改了加载程序图像，因此示例可行）：

const loaderComponent = (ComposedComponent, predicate) => {
  return (props) => {
    const isLoading = predicate && predicate(props)
    if (isLoading) {      
      return <div className='loading-data'>
                <img src='https://s32.postimg.org/8w18tbrlx/477_1.gif' />
             </div>
    }
    return <ComposedComponent {...props} />
  }
}

用法：

const TextShower = (props) => { 
  return <div>{props.text}</div>   
}
const LoaderTextShower = loaderComponent(TextShower, 
                                         (props) => !props.text)

小提琴：https：//jsfiddle.net/omerts/4edgbhmz/

来自" React In React"文档：

您可以根据组件中的任何其他状态或道具对其进行计算吗？如果是这样，那不是状态。