组件懒加载

今天主要学习React项目的怎么实现组件懒加载，那为什么需要懒加载呢？

在React的项目中import导入其他组件和库都是默认在初始直接导入的，webpack等打包工具会将import导入的文件直接合并到一个大文件中，如果项目很大，打包完后初始化加载时需要加载的文件会很大，这时候就需要代码分割，也就是懒加载。延迟（懒）加载是首先呈现仅需要或关键的用户界面项目，然后悄悄展开非关键项目的技术。

在React 16.6中添加了一个使代码拆分更容易的新功能React.lazy()。

React.lazy()

React.lazy()是16.6以后的版本，lazy()方法是用来对项目代码进行分割，只有当组件被加载，内部的资源才会导入；它可以让咱们通过代码拆分懒加载 react 组件，而无需任何其他库的帮助。它现在已完全集成到react库本身。

语法：

// 普通导入
import Input from './components/input';

// 懒加载导入
const Input=lazy(()=>import("./components/input"));

React.Suspense()

在使用的时候还需要用到suspense来搭配使用，React.Suspense也是React16.6以后的版本，Suspense的作用就是在遇到异步请求或者异步导入组件的时候等待请求和导入完成时再进行渲染。

Suspense 是lazy 函数所需的组件，基本上是用来包装lazy 组件的。 suspense 组件可以包装多个懒加载组件。它需要一个fallback属性，该属性接收咱们要在加载懒加载组件时呈现的react元素。

语法：

<Suspense fallback={<div></div>}>
   <Input />
 </Suspense>

插槽的使用

vue中有slot插槽，react中可以通过props实现插槽用法。

举一个简单的例子来看下react中是怎么使用插槽的：

新建一个button的组件：

// button.js
import React, { Component } from 'react';
import './style.css';
export default class InputComponent extends Component {
  render() {
    return (
      <React.Fragment>
        <button
          type={this.props.type}
          className={'my-button ' + this.props.className}
          style={this.props.style}
          onClick={this.props.onClick}
        >
          {this.props.children}
        </button>
      </React.Fragment>
    );
  }
}
InputComponent.defaultProps = {
  type: 'button',
};

引入button.js进行使用：

import Button from './components/button';

 <Button
     className='btn-bg'
     style={{
          width: '100px',
          height: '50px',
          fontSize: '20px',
          color: '#FF0000',
        }}
    onClick={this.del.bind(this)}>删除</Button>

初学阶段，很多知识还不是很熟练，有问题可以一起交流；

接下来继续学习react相关知识点~

React的学习（六）——组件的懒加载和插槽的使用

组件懒加载

React.lazy()

React.Suspense()

插槽的使用