在DOM渲染时显示加载屏幕？

Question

这是来自Google Adsense应用程序页面的示例。显示在主页之前的加载屏幕显示在之后。

我不知道如何使用React做同样的事情，因为如果我让React组件渲染加载屏幕，它不会在页面加载时显示，因为它必须等待之前渲染的DOM。

更新：

我以我的方法为例，将屏幕加载程序放入index.html中，并在ReactcomponentDidMount（）lifecycle方法中删除它。

示例和反应加载屏幕。

Answer 1

解决方法是：

在渲染函数中，执行以下操作：

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

在构造函数中将isLoading初始化为true，在componentDidMount中将isLoading初始化为false

Answer 2

这可以通过在html文件中放置加载图标（index.htmlex）来实现，以便用户在html文件加载后立即看到该图标。

当你的应用程序完成加载后，你只需在生命周期挂钩中删除加载图标，我通常在componentDidMount中这样做。

Answer 3

当html页面被渲染时，立即显示一个旋转器（当React加载时），并在React准备好后隐藏它。

由于微调器是在纯超文本标记语言/CSS（React域之外）中呈现的，React不应该直接控制显示/隐藏过程，并且实现应该对React透明。

由于将react渲染到DOM容器中-

你不能添加一个DOM元素（例如div）在反应根，因为React将替换容器的内容，一旦ReactDOM. render（）被调用。即使您渲染null，内容仍然会被注释-替换。

解决方法是将微调器类添加到react容器中，并使用：empty伪类。只要容器中没有呈现任何内容（注释不计算），微调器就会可见。只要react呈现的不是注释，加载程序就会消失。

例1

在该示例中，您可以看到一个组件，它将呈现null，直到准备就绪。容器也是加载器-

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for an async action, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app" class="loader"></div> <!-- add class loader to container -->