Suspense for Data Fetching

Experimental

https://reactjs.org/docs/concurrent-mode-suspense.html

React 16.6


const ProfilePage = React.lazy(() => import('./ProfilePage'));
// Lazy-loaded // Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
<ProfilePage />
</Suspense>

Fetch-on-Render

bad

// In a function component:
useEffect(() => {
fetchSomething();
}, []); // Or, in a class component:
componentDidMount() {
fetchSomething();
}

function ProfilePage() {
const [user, setUser] = useState(null); useEffect(() => {
fetchUser().then(u => setUser(u));
}, []); if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline />
</>
);
} function ProfileTimeline() {
const [posts, setPosts] = useState(null); useEffect(() => {
fetchPosts().then(p => setPosts(p));
}, []); if (posts === null) {
return <h2>Loading posts...</h2>;
}
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}

Fetch-Then-Render

Promise.all & react hooks

better


function fetchProfileData() {
return Promise.all([
fetchUser(),
fetchPosts()
]).then(([user, posts]) => {
return {user, posts};
})
} // Kick off fetching as early as possible
const promise = fetchProfileData(); function ProfilePage() {
const [user, setUser] = useState(null);
const [posts, setPosts] = useState(null); useEffect(() => {
promise.then(data => {
setUser(data.user);
setPosts(data.posts);
});
}, []); if (user === null) {
return <p>Loading profile...</p>;
}
return (
<>
<h1>{user.name}</h1>
<ProfileTimeline posts={posts} />
</>
);
} // The child doesn't trigger fetching anymore
function ProfileTimeline({ posts }) {
if (posts === null) {
return <h2>Loading posts...</h2>;
}
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}

Render-as-You-Fetch / 按需渲染

Suspense

good

// This is not a Promise. It's a special object from our Suspense integration.
const resource = fetchProfileData(); function ProfilePage() {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline />
</Suspense>
</Suspense>
);
} function ProfileDetails() {
// Try to read user info, although it might not have loaded yet
const user = resource.user.read();
return <h1>{user.name}</h1>;
} function ProfileTimeline() {
// Try to read posts, although they might not have loaded yet
const posts = resource.posts.read();
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}

这就提出了一个问题,即在渲染下一个屏幕之前我们如何知道要获取什么?

https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html

Errors & ErrorBoundary

getDerivedStateFromError


// Error boundaries currently have to be classes.
class ErrorBoundary extends React.Component {
state = { hasError: false, error: null };
static getDerivedStateFromError(error) {
return {
hasError: true,
error
};
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}
function ProfilePage() {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
<ErrorBoundary fallback={<h2>Could not fetch posts.</h2>}>
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline />
</Suspense>
</ErrorBoundary>
</Suspense>
);
}

https://aweary.dev/fault-tolerance-react/

https://codesandbox.io/s/infallible-feather-xjtbu

relay

suspense integration

https://relay.dev/docs/en/experimental/step-by-step

https://relay.dev/docs/en/experimental/api-reference#usepreloadedquery


fetch data with React Hooks

https://www.robinwieruch.de/react-hooks-fetch-data







Concurrent Mode

https://reactjs.org/docs/concurrent-mode-intro.html

react fiber

  1. 时间分片

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


Suspense for Data Fetching的更多相关文章

  1. [NgRx] NgRx Data Fetching Solution - How to Load Data Only If Needed

    We have a reoslver, which everytime we want visit '/courses' route, it will be triggered, then api w ...

  2. [React] Fetch Data with React Suspense

    Let's get started with the simplest version of data fetching with React Suspense. It may feel a litt ...

  3. 深度理解 React Suspense(附源码解析)

    本文介绍与 Suspense 在三种情景下使用方法,并结合源码进行相应解析.欢迎关注个人博客. Code Spliting 在 16.6 版本之前,code-spliting 通常是由第三方库来完成的 ...

  4. [React] Write a generic React Suspense Resource factory

    Using Suspense within our component isn't exactly ergonomic. Let's put all that logic into a reusabl ...

  5. [MST] Loading Data from the Server using lifecycle hook

    Let's stop hardcoding our initial state and fetch it from the server instead. In this lesson you wil ...

  6. React 特性剪辑(版本 16.0 ~ 16.9)

    Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...

  7. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  8. Java性能提示(全)

    http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...

  9. A beginner’s guide to Cache synchronization strategies--转载

    原文地址:http://vladmihalcea.com/2015/04/20/a-beginners-guide-to-cache-synchronization-strategies/ Intro ...

随机推荐

  1. 数据库内核——基于HLC的分布式事务实现深度剖析

    DTCC 2019 | 深度解码阿里数据库实现 数据库内核--基于HLC的分布式事务实现深度剖析-阿里云开发者社区 https://developer.aliyun.com/article/70355 ...

  2. CPU处理器架构和工作原理浅析

    CPU处理器架构和工作原理浅析 http://c.biancheng.net/view/3456.html 汇编语言是学习计算机如何工作的很好的工具,它需要我们具备计算机硬件的工作知识. 基本微机设计 ...

  3. 正则r的作用

    >>> mm = "c:\\a\\b\\c" >>> mm 'c:\\a\\b\\c' >>> print(mm) c:\a\ ...

  4. Java内存溢出处理

    在解决java内存溢出问题之前,需要对jvm(java虚拟机)的内存管理有一定的认识. jvm管理的内存大致包括三种不同类型的内存区域:Permanent Generation space(永久保存区 ...

  5. Centos搭建spark

    Centos搭建spark 一.spark介绍 二.spark安装前提 三.集群规划 四.spark安装 五.修改spark环境变量 六.修改spark-env.sh 七.修改slaves 八.将安装 ...

  6. 杂论-FTP

    FTP 一 简单介绍 FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制文件的双向传输.同时, ...

  7. 分布式理论 PACELC 了解么?

    PACELC 基于 CAP 理论演进而来. CAP 理论是一个分布式系统中老生常谈的理论了: C(Consistency):一致性,所有节点在同一时间的数据完全一致. A(Availability): ...

  8. JVM之堆体系结构

    1.Heap堆(Java7之前) 一个JVM实例只存在一个堆内存,堆内存的大小是可以调节的.类加载器读取了类文件后,需要把类.方法.常变量放到堆内存中,保存所有引用类型的真实信息,以方便执行器执行,堆 ...

  9. 静态链表 Static Link List

    Static Link List 静态链表 其中上图来自http://www.cnblogs.com/rookiefly/p/3447982.html  参考: http://www.cnblogs. ...

  10. 2019HDU多校 Round9

    Solved:3 02 Rikka with Cake (树状数组) #include <bits/stdc++.h> using namespace std; typedef long ...