react suspense的认识和了解

超、凢脫俗 2022-04-23 05:50 232阅读 0赞

### react suspense的认识和了解 ###

*   *  react suspense见名知意
     *  后续版本相关
     *  技术背景
     *  解决的问题或者说一些使用场景
     *   *  当然凡事都有两面性
         *  code splitting
         *  async data fetching(还在生产中)
         *  make app more "performant with a better user experience(使用一种用户友好的方式使你的app性能更好)
     *  相关链接

## 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更新][React_16.x]
2.  [视频链接][Link 1]
3.  [官网地址博客说明地址，附带视频][Link 2]

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

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

### 当然凡事都有两面性 ###

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

### code splitting ###

1.  使用react lazy and react Suspense 组件，见下代码
2.  [webpack code spliting][]
3.  [Create React App中的代码分割实践][Create React App]
4.  [基于webpack Code Splitting实现react组件的按需加载][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 组件异常处理方案实践][React Error Boundary]

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

> concurrent Rendering 异步渲染？强行带节奏~  
>   
> [并发模式!][Link 3]  
>   
> async Rendering ? 不是更好吗？

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

sync mode  
concurrent mode

## 相关链接 ##

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

[React_16.x]: https://react.docschina.org/blog/2018/11/27/react-16-roadmap.html
[Link 1]: https://www.youtube.com/watch?v=v6iR3Zk4oDY
[Link 2]: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
[React Suspense]: https://zhuanlan.zhihu.com/p/34198147
[React_Time Slice _Suspense]: https://www.zhihu.com/question/268028123/answer/333291298
[webpack code spliting]: https://webpack.docschina.org/guides/code-splitting/
[Create React App]: https://juejin.im/post/5ab0cd96f265da239530d1c1
[webpack Code Splitting_react]: https://zhuanlan.zhihu.com/p/26228500
[React Error Boundary]: https://juejin.im/post/5b540d00f265da0fb0186da2
[Link 3]: https://www.youtube.com/watch?v=ByBPyMBTzM0
[React_Time Slice _Suspense 1]: https://www.zhihu.com/question/268028123/answer/332182059
[React_Suspense]: https://zhuanlan.zhihu.com/p/34210780