一、React简介与特点

1.1 特性与简介

React：用于构建用户界面的JS库

特点：声明式，组件化，跨平台编写

1.2 React 哲学

React 是用 JS 构建 快速响应 的 大型Web应用程序 的首选方式之一。它在Facebook和Instagram上表现优秀。

等待资源加载时间 和大部分情况下 浏览器单线程执行 是影响 web 性能的两大主要原因。

1.3 等待资源加载

React.Lazy 动态加载一个应用可能有很多外部路由，一个页面很长，但在同一时间展示的内容是有限的（窗口大小限制），在用户需要看到该组件时加载对应的文件，就可以把代码分割成一个个小块，也就是trank，这样就不会加载太慢。也就是用React.Lazy实现动态加载

React.Suspense 单个trank加载慢的话，就优化加载时的视图，加载时展示一些降级ui，或者提示，不会造成突兀的白屏，React.Suspense就是为这种场景准备的。

 <Tabs activeTab={activeKey} onChange={setActiveKey}>
     {routes.map((item) => {
         const Component = React.lazy(Q) => import(`./${item.key}`));
         const RenderComponent =(
         <Suspense fallback={"资源加载中...")>    
             <Component /
         </Suspense>
         );
         return (
             <Tabs.TabPane key={item.key) title={item.name)>
                 {RenderComponent}
             </Tabs.TabPane>
         );
     }}}
 </Tabs>

ErrorBoundary 项目中断，突然断网之类的情况下，会突然白屏，给用户体验极差。React 提供了 ErrorBoundary ，出现错误的时候可以渲染降级ui。只能在内组件使用，涉及到生命周期

 class ErrorBoundary extends React.Component {
     constructor(props) {
     super(props);
     this.state = { hasError: false };
 }
 static getDerivedStateFromError() {
 // 更新 state 使下一次渲染能够现实降级UI
     return { hasError: true };
 }
 componentDidCatch(error, errorInfo) {
     logger.error(error, errorInfo);
 }
 render() {
     if (this.state.hasError) {
         // 你可以自定义降级后的 UI 并渲染
         return (
             <Empty description="抱歉，出现错误! " />
         );
     }
     return this.props.children;
     }
 }

1.4 浏览器线程执行

DOM (Document Object Model 文档对象模型 ) 文档表示的是整个的HTML网页文档; 对象表示将网页中的每一个部分都转换成了一个对象; 模型来表示对象之间的关系(DOM树),方便我们获取对象。

线程执行步骤：JS 执行，浏览器计算样式布局，UI 绘制

异步更新 浏览器刷新频率通常是60hz，就是16.6毫秒，JS是可以操作 dom 的，所以 js 执行和 UI绘取是不能同时进行的，JS的加载会阻塞浏览器的渲染。如果js的执行时间超过ui的绘取时间/页面刷新时间，就没有时间进行样式布局和ui绘取了，然后掉帧，给用户的感觉就是卡爆了。 React的解决办法，对于一个重的更新任务，不直接等待它的执行，而是分成多个新任务，放在每帧的空闲时间去处理（时间切片），这样不会阻塞ui，获得良好的体验。

时间切片 每帧的空闲时间。建立了虚拟dom的概念，不在每一帧去操作真实的dom，而去操作虚拟dom，之后所有的新任务执行完毕之后，在通过虚拟dom树渲染一个真实的dom。

React Fiber React16之后对虚拟dom进行了升级，改名为 ReactFiber。其解决的问题看学员手册。

1.5 更新流程

三大车间

Scheduler(调度器)

Scheduler是一个独立的包，不仅仅在React中可以使用。Scheduler 是一个任务调度器，它会根据任务的优先级对任务进行调用执行。在有多个任务的情况下，它会先执行优先级高的任务。如果一个任务执行的时间过长，Scheduler 会中断当前任务，让出线程的执行权，避免造成用户操作时界面的卡顿。在下一次恢复未完成的任务的执行。

调度器分割任务，主流浏览器提供了 requestldleCallback 方法，就是在浏览器的空闲时间可以执行一些操作，但是由于兼容性问题，React在内部提供了

Reconciler(协调器)

协调器负责比较新旧两棵树，并计算出需要进行的最小更改。这个过程称为协调（Reconciliation）。Reconciler 起作用的阶段我们称为 render 阶段，Renderer 起作用的阶段我们称为 commit 阶段。

Renderer(渲染器)

渲染器负责将 React 组件渲染到目标平台，例如 DOM、Canvas 或原生移动应用。不同的渲染器有不同的实现方式，但它们都遵循相同的模式。

1.6 优缺点

优点

快速响应: Fiber
组件化：复用性强
声明式编程
跨平台：只需修改渲染器

缺点

大型应用需要配套学习状态管理、路由工具
不适合小型应用，需要用 babel处理

React 基础与实践（上）