一、React 简介与特性

1、介绍

1-1、什么是React

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

1-2、React是为什么大型Web应用程序首选之一

1-2-1、等待资源加载时间

（1）使用React.Lazy与React.Suspense

React.lazy 支持动态引入组件，需要接收一个 dynamic import 函数，函数返回的应为 promise 且需要默认导出需要渲染的组件。React.lazy() 接收一个函数，该函数返回一个 import() 函数调用。import() 函数是 ECMAScript 动态导入语法的一部分，它允许我们在运行时异步加载一个模块。

使用：

const MyComponent = React.lazy(() => import('./Component'));

Suspense 是一个延迟函数所必须的组件，通常用来包裹住延迟加载组件。多个延迟加载的组件可被包在一个 suspense 组件中。它也提供了一个 fallback 属性，用来在组件的延迟加载过程中显示某些 react 元素。

使用：

<Suspense fallback={fallback}> 
  <MyComponent /> 
</Suspense>

同时使用：

React.lazy() 组件需要在 React.Suspense 组件下进行渲染，Suspense 又支持传入 fallback 属性，作为动态加载模块完成前组件渲染的内容。

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

在上面的代码中，当组件渲染时，React会异步加载该组件。其中fallback属性指定了当组件加载时会自动显示Loading界面，当组件加载完毕，React将会自动呈现。

（2）使用ErrorBoundary

ErrorBoundary是一个组件，作用：用于处理渲染期间出现的JavaScript错误，挡在渲染组件期间抛出未捕获的错误，react会组件数向上寻找最近的ErrorBoundary，并将错误传入该组件。

2、更新流程

3、特点

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

二、React基础

1、常见的API函数

2、常见的HOOKS及作用