Question

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

我的渲染功能类似于：

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

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

Answer 1

首先，我们尝试派生＆＃34;加载＆＃34;从数据中说明，而不是在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/

来自＆＃34;反思中的思考＆＃34; DOC：

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

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

1 个答案: