在第一次反应应用程序初始化之前显示加载图标

Question

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

我可以在不破坏任何东西的情况下做这样的事情吗？

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

Answer 1

是的。

加载 javascript 后，您可以通过将 React 应用渲染到相同的 <div>

来替换 Loading...

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

Answer 2

使用 component 生命周期方法的一种方法。

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>

在第一次反应应用程序初始化之前显示加载图标

Show loading icon before first react app initialization

javascript

dom

loading

reactjs