Lazy lazy loading early adopters react 16.6

Reprinted : https://juejin.im/post/5bd70def6fb9a05d38282c30

react 16.6 release new features  lazy , and a component Suspense

Here we look at his usage

First, let's create two components LazyTest.1 and LazyTest.2, the same content

import React, { Component } from 'react'

export default class LazyTest extends Component{
  render(){
    return (
      <div>
        <h1>LazyTest 组件</h1>
      </div>
    );
  }
}

Lazy distribution is then introduced in the form of App inlet js

import React, { Component, lazy, Suspense } from 'react';

const LazyTest1 = lazy(() => import('./components/LazyTest.1'));
const LazyTest2 = lazy(() => import('./components/LazyTest.2'));

class App extends Component {
  fallback = () =>{
    return (
      <div>Loading...</div>
    );
  }

  render() {
    return (
      <div>
        <Suspense fallback={this.fallback()}>
          <h1>懒加载组件</h1>
          <LazyTest1 />
          <LazyTest2 />
        </Suspense>
      </div>
    );
  }
}

export default App;

Suspense The outer components can be placed anywhere lazy loading, fallback lazy loading assembly during a load transition, or transition effects can put some method.

Here we look to break out of the pack

LazyTest.1 and LazyTest.2 which were reached in a single package.

Is not very convenient ah, you come try it!

Note: React.lazyand  Suspense is not yet available to the server side, if the students do server-side rendering official or recommended  React Loadable