React 高级指引的学习笔记

无障碍

对于无障碍部分，没有深入进去研究和分析，个人认知是所有的功能按钮，操作都需要尽量贴合所有用户，对具有某些欠缺的用户也能有足够友好的浏览体验，比如所有的鼠标操作，都能够具备键盘控制等等，后续如果深入研究，再补充。

代码分割

在研究代码分割钱，首先需要明白什么是打包，作为一个初学者，使用过的框架只有webpack，对于React来说，有一个create-react-app能够很方便的完成一个简单的项目搭建，而项目搭建完成后，对于比较简单的单页面应用或者没有额外需求的项目来说，不需要进行优化，如果需要进一步进行配置，可以通过下列代码进行暴露配置：

npm run eject  或者  yarn eject

使用何种方法看各自的配置，在暴露后的文件中进行相应的配置即可，具体实现，等后面如果有深入研究再写。而react中代码分割主要讲的还是通过 import 来优化打包。至于为什么不是require，我也不清楚，不过这篇文章require和import的区别中写的比较清晰，个人认为是兼容性以及es6规范的考虑。

常用的import引入模块方式有很多：

import Comp from './Component'  //引入自定义组件
import { Button } from 'antd'   // 引入模块
import * as d3 from 'd3'    // 引入模块内所有，以d3作为对象
import Img from '../../../assets/images/test.png'  //引入图形

通过 import 引入的内容，如果是用create-react-app创建的项目，则在 webpack 打包时会自动进行分割，若果不是，就自己去搜索一下怎么配，网站上推荐了代码分割网站。

后面才是我认为的这节的重点 —— React.lazy(懒加载)。前文已经提到了组件通过正常的 import 引入，而懒加载的实现主要是依赖于 React 的两个部分 Suspense 和 lazy ,你可以通过如下两种方式来使用它：

/**
 * @desc 方法1
 */
import React, { Component, Suspense, lazy } from "react";

// ps:常量定义在import之后
const Comp = lazy(() => import("@/pages/Comp"));

class Test extends Component {
  render() {
    return (
      <>
        loading...

}> ); } } /** * @desc 方法2 */ import React, { Component } from "react"; // ps:常量定义在import之后 const Comp = React.lazy(() => import("@/pages/Comp")); class Test extends Component { render() { return ( <> loading...

}> ); } }

ps：在使用lazy后，必须跟上Suspense包裹在外层

同时，Suspense内不是只能有一个lazy对象，他可以是多个对象，就是说只要在最外层使用了该模块，同一组件下的所有lazy都能被渲染出来，这在定义路由的时候尤为有效：

/**
 * @desc 懒加载结合路由导航
 */
import React, { Component, Suspense } from "react";
import { Switch, Route, Redirect, withRouter } from "react-router-dom";
import routes from "@/routes";
// import Navigation from "@/components/Navigation";
import { filiterRoutes } from "@/util";
import { message } from "antd";

@withRouter
class RouteOption extends Component {

  judgeRoute = (route, path) => {
    let bool = false;
    route &&
      route.length > 0 &&
      route.map((v) => {
        if (v.href === path) {
          bool = true;
        }
        return v;
      });
    return bool;
  };
  renderRoute = (routeslist) => {
    return (
      
        {routeslist.map((item, index, arr) => {
          if (arr.length > index + 1)
            return (
               }
              >
            );
          else {
            return (
              
                 }
                >
                
              
            );
          }
        })}
      
    );
  };
 
  render() {
    return (
      loading...