React高级指引笔记（一）

博客

zyzcos.gitee.io

demo

https://gitee.com/zyzcos/react-advanced-guidelines/tree/master

代码分割

主要是使用Webpack、Rollup等，本次使用自己熟悉的Webpack

基础

这里学的东西，很多都是Vue.js里面学过的如：

• import
• export

webpack的基本配置

  npm install react
  npm install react-dom
  npm install -D babel-loader@7 babel-core babel-preset-env

webpack.config.js

  module: {
        rules:[
            //babel处理js
            {
                test: /\.js$/,
                exclude: /node_modules/, //排除此文件夹
                use: [
                    'babel-loader'
                ]
            }
        ]
    }

index.js

  import * as React from 'react';
  import ReactDOM from 'react-dom';

新内容

1. React.lazy函数，实现动态引入【懒加载、按需加载】

  const OhterComponent = React.lazy( ()=> import('./components/OtherComponent') );

• React.lazy接收一个函数，该函数必须动态调用import()，并需要该动态调用返回一个Promise,该Promise需要return default export的React组件。

• 于此同时，我们也可以在懒加载的时候，提示用户该组件正在加载。

  import React,{ Suspense } from 'react';
  const OhterComponent1 = React.lazy( ()=> import('./components/OtherComponent1') );
  const OhterComponent2 = React.lazy( ()=> import('./components/OtherComponent2') );

  function MyComponent(props) {
    return (
      

         Component is Loading... 
 }>
          

            
            
          
        
      

) }

• 假如组件加载失败，可以通过异常捕获边界技术处理。

  import React,{ Suspense } from 'react';
  import MyErrorComponent from './components/MyErrorComponent';
  const OhterComponent1 = React.lazy( ()=> import('./components/OtherComponent1') );
  const OhterComponent2 = React.lazy( ()=> import('./components/OtherComponent2') );

  function MyComponent(props) {
    return (
      

        
           Component is Loading... 
 }>
            

              
              
            
          
        
      

) }

Context

Context提供组件树中，提供一种自顶而下的数据传递方法。

相关API

1. React.createContext:

  const MyContext =