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

Question

我目前正在通过将状态 readyToRender 初始化为 false 并在我拥有呈现 UI 所需的数据后将其设置为 true 来延迟组件的呈现。

我的渲染函数类似于：

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

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

React delayed rendering

Answer 1

首先，我们尝试从数据中导出 "loaded" 状态，而不是将其保存在 this.state 中。虽然数据不可用，但我们会显示一个微调器，但您最好什么都不显示。

例如：

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

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

Fiddle: 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)

Fiddle: https://jsfiddle.net/omerts/4edgbhmz/

来自 "Thinking in React" 文档：

Can you compute it based on any other state or props in your component? If so, it's not state.

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

What is the preferred design pattern to delay rendering of a component in React?

javascript

rendering

design-patterns

reactjs