React高级指引笔记（一）

最新推荐文章于 2023-04-04 08:32:42 发布

子与子乘

最新推荐文章于 2023-04-04 08:32:42 发布

阅读量762

点赞数

分类专栏： React.js 文章标签： react.js javascript webpack

本文链接：https://blog.csdn.net/qq_55978913/article/details/122675439

版权

博客

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';

新内容

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 (
      <div>
        <Suspense fallback = { <div> Component is Loading... </div> }>
          <section>
            <OtherComponent1 />
            <OtherComponent2 />
          </section>
        </Suspense>
      </div>
    )
  }

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

  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 (
      <div>
        <MyErrorComponent>
          <Suspense fallback = { <div> Component is Loading... </div> }>
            <section>
              <OtherComponent1 />
              <OtherComponent2 />
            </section>
          </Suspense>
        </MyErrorComponent>
      </div>
    )
  }