react suspense的认识和了解

版权声明：王为仁 https://blog.csdn.net/wangweiren_get/article/details/86624820

react suspense见名知意

suspense

悬念; 悬而未决，含糊不定; 焦虑，挂念; 中止，暂停.
悬停

后续版本相关

React 16.x的两大新特性 Time Slicing, Suspense
React 16.6：支持代码拆分的 Suspense 组件（已经发布）
React 16.7：React Hooks（~ 2019 年 Q1）
React 16.8：并发模式（~ 2019 年 Q2）
React 16.9：支持数据提取的 Suspense 组件（~ 2019 年年中）

技术背景

react
由来 自从Dan老哥加入React team以后，自从Dan老哥加入React team以后，React 带来了很多变化其中Time Slicing和Suspense是Dan在 Beyond React 16 by Dan Abramov - JSConf Iceland 演讲的题目

1. React中文链接关于16.x更新
2. 视频链接
3. 官网地址博客说明地址，附带视频

解决的问题或者说一些使用场景

Suspense主要解决的就是网络IO问题。网络IO问题其实就是我们
现在用Redux+saga等等一系列乱七八糟的库来解决的「副作用」
问题。

当然凡事都有两面性

1. 超简化的React Suspense实现
2. 如何评价React的新功能Time Slice 和Suspense？

code splitting

1. 使用react lazy and react Suspense 组件，见下代码
2. webpack code spliting
3. Create React App中的代码分割实践
4. 基于webpack Code Splitting实现react组件的按需加载

代码如下

import React, { lazy, Suspense } from 'react';
import { Router } from "@reach/router";

import TabContainer from './TabContainer';
import NavLink from './NavLink';
import Spinner from "./Spinner"

import Profile from './Profile';
const Albums = lazy(() => import("./Albums"));
const Voting = lazy(() => import('./Voting'));

import './App.css';

function App() {
  return (
    <div className="app">
      <h1 className="coldpedia-title">COLDPEDIA</h1>
      <nav>
        <NavLink to="/">Profile</NavLink>
        <NavLink to="albums">Albums</NavLink>
        <NavLink to="voting">Voting</NavLink>
      </nav>
      <TabContainer>
        <Suspense fallback={<Spinner />}>
          <Router>
            <Profile path="/" />
            <Albums path="albums" />
            <Voting path="voting" />
          </Router>
        </Suspense>
      </TabContainer>
    </div>
  );
}

export default App;

async data fetching(还在生产中)

const albumsResource = unstable_createResource((id) => {
  return fetchAPI(`/albums/${id}`); 
})
cache 到哪里？global???

react component render fn;
 const album = albumsResource.read(this.props.id); 
// 体现suspense的地方之一
 

// 类似于
<ErrorBoundary></ErrorBoundary>

React Error Boundary 组件异常处理方案实践

make app more "performant with a better user experience(使用一种用户友好的方式使你的app性能更好)

concurrent Rendering 异步渲染？强行带节奏~

并发模式!

async Rendering ? 不是更好吗？

开启所谓的异步模型
ReactDOM.createRoot(domEle.render())
Suspense组件多一个 maxDuration={700(ms)}

sync mode
concurrent mode

相关链接

1. 如何评价React的新功能Time Slice 和Suspense？
2. React：Suspense的实现与探讨