react高级指南之可访问性与代码拆分

return (

 

<Suspense fallback = {

Loading…

}>

)

}

在上面的这个例子中，就很好的体现了这一点

当多个组件加载，某个组件因为网络错误没有加载出来的时候，此时我们就需要在Suspense组件的

外部再放置一个MyComponent组件。例如下面的这个例子

import MyErrorBoundary from ‘./MyErrorBoundary’;

const OtherComponent = React.lazy(() => import(‘./OtherComponent’));

const AnotherComponent = React.lazy(() => import(‘./AnotherComponent’));

const MyComponent = () => (

<Suspense fallback={

Loading…

}>

);

基于路由的代码分离

在web页面上，很多人都习惯于当加载另外一个页面的时候需要更多一点的时间，如果在这里我们

引入第三方模块 react-router-dom，这就很好的实现了路由的跳转

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;

import React, { Suspense, lazy } from ‘react’;

const Home = lazy(() => import(‘./routes/Home’));

const About = lazy(() => import(‘./routes/About’));

const App = () => (

<Suspense fallback={

Loading…

}>

);

如果要跳转到具体的页面，这里面还需要要到react-router-dom中的Link 组件与其to属性

名字的导出

导出的方式有两种
《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】
第一种： export const MyComponent = …
第二种： export { MyComponent as default } from ’   ’
当你去使用lazy使你需要从人react中去引入。
import React ,{ lazy } from ‘react’;
以上内容便是对于访问性与代码分离的部分，尤其应该注意的是代码分离部分，其在实际的开发过程中，有很大的使用价值