React 模式

• legacy模式 — 通过ReactDOM.render创建的应用会开启该模式，可能不支持一些新功能
• blocking模式 — 通过ReactDOM.createBlockingRoot创建的应用会开启该模式。开启部分concurrent模式特性，作为迁移到concurrent模式的第一步
• concurrent模式 — 通过ReactDOM.createRoot创建的应用会开启该模式。面向未来的开发模式

区别是将同步的更新机制重构为异步可中断的更新
异步更新
高优更新中断正在进行中的低优更新，先完成渲染流程
待高优更新完成后，低优更新基于高优更新的部分或者完整结果重新更新
类似于分支rebase

作者：卡颂
链接：https://juejin.im/post/5f05a3e25188252e5c576cdb
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

React中异步获取数据的方式

1. fetch-on-render 渲染之后获取数据
2. fetch-then-render
3. Render-as-you-fetch 获取数据之后渲染，使用 Suspense

   Lazy 与 Suspense

   lazy

   React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件

const OtherComponent = React.lazy(() => import("./OtherComponent"))

lazy 函数用来将组件模块的导入行为封装为 React 组件
封装的是组件导入行为，而不是组件本身。导入意味着网络请求

Suspense

lazy 必须配合 Suspense 来一起使用，因为在异步加载的过程中，这个空白档必须要给 React 提供一个 loading 的组件
Suspense 的 fallback 属性必须传入一个 React 组件实例

ErrorBoundary

当 React 的异步组件加载出错时，页面就会报错。它利用了componentDidCatch这个生命周期函数来

const About = lazy(
  () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(import(/* webpackChunkName:"about" */ "./About.jsx"));
      }, 2000);
    })
);
class App extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <About />
        </Suspense>
      </div>
    );
  }
}