在首次反应应用初始化之前显示加载图标

Question

在浏览器下载所有js文件并加载反应应用程序之前，显示加载程序图标的标准方式是什么？

我可以做这样的事吗？

<div id="content" class="app"> 
    Loading... 
</div> 

Answer 1

是的。

一旦你的JavaScript加载，你可以通过渲染你更换Loading...反应应用到同一<div>这样使用component生命周期方法的

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

Answer 2

的一种方式。

class App extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { 
 
     loading: true 
 
     }; 
 
    } 
 
    
 
    componentWillMount(){ 
 
     this.setState({loading: true}); //optional 
 
    } 
 

 
    componentDidMount(){ 
 
     this.setState({loading: false}) 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <section className="content"> 
 
       {this.state.loading && 'loading...'} {/*You can also use custom loader icon*/} 
 
       <p>Your content comes here</p> 
 
       {this.props.children} 
 
      </section> 
 
     ); 
 
    } 
 
} 
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"> 
 
    
 
</div>