Suspense for Data Fetching
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>
);
}
这就提出了一个问题,即在渲染下一个屏幕之前我们如何知道要获取什么?
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
- 时间分片
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Suspense for Data Fetching的更多相关文章
- [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 ...
- [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 ...
- 深度理解 React Suspense(附源码解析)
本文介绍与 Suspense 在三种情景下使用方法,并结合源码进行相应解析.欢迎关注个人博客. Code Spliting 在 16.6 版本之前,code-spliting 通常是由第三方库来完成的 ...
- [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 ...
- [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 ...
- React 特性剪辑(版本 16.0 ~ 16.9)
Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- Java性能提示(全)
http://www.onjava.com/pub/a/onjava/2001/05/30/optimization.htmlComparing the performance of LinkedLi ...
- A beginner’s guide to Cache synchronization strategies--转载
原文地址:http://vladmihalcea.com/2015/04/20/a-beginners-guide-to-cache-synchronization-strategies/ Intro ...
随机推荐
- Fiddler扩展——自定义列数据&Tunnel to 443解决办法
在平时日常工作中,使用Fiddler的占比还是蛮大的.使用过程,也会遇到一些小问题,问题虽小,但抓不到包,分析不了问题与数据,那也是件麻烦的事情. 以前也分享过一些小技巧,可以找以前的博文查看,具体地 ...
- Java进阶专题(二十二) 从零开始搭建一个微服务架构系统 (上)
前言 "微服务"一词源于 Martin Fowler的名为 Microservices的,博文,可以在他的官方博客上找到http:/ /martinfowler . com/art ...
- Pycharm 使用学习
作为一个菜鸟,为了督促自己坚持学习python,记录每日学习日记是一个不错的选择 电脑安装python,python可以丛网络上下载相关版本进行安装,目前我电脑安装的是pyhon 3.7.3的版本,p ...
- Xctf-easyapk
Xctf-easyapk Write UP 前期工作 查壳 无壳 运行 没什么特别的 逆向分析 使用jadx反编译查看代码 先看看文件结构 MainActivity代码 public class Ma ...
- 基于Vue+ElementUI架构的前端国际化解决方案
1.项目目录结构 ├── build 构建相关配置文件 | |── index.js webpack的基础配置入口 ├── m ...
- centos7 快速搭建redis集群环境
本文主要是记录一下快速搭建redis集群环境的方式. 环境简介:centos 7 + redis-3.2.4 本次用两个服务6个节点来搭建:192.168.116.120 和 192.168.1 ...
- Tomcat 核心组件 Container容器相关
前言 Engine容器 Host容器 前言 Connector把封装了Request对象以及Response对象的Socket传递给了Container容器,那么在Contianer容器中又是怎么样的 ...
- telnet | ping
ping通常是用来检查网络是否通畅或者网络连接速度的命令. ping www.baidu.com 而telnet是用来探测指定ip是否开放指定端口的. telnet xxx 443 查看443开放没 ...
- Linux常用命令:性能命令
本文介绍Linux常用性能统计分析命令,监控进程或者系统性能.主要包括CPU(top.mpstat).内存(vmstat.free).I/O(iostat).网络性能(sar).系统日志信息(dems ...
- sh 脚本名字和./脚本名字有什么区别
sh xxx用 sh 这个shell (sh一般指系统默认shell,比如 bash, ksh, Csh 等都有可能) 来解释和运行 xxx 这个脚本.xxx 文件不必具有可执行属性(chmod +x ...