在首次反應應用初始化之前顯示加載圖標

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>