React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
新⼈⾸单¥59.9
1283 人已学习
课程目录
已更新 18 讲 / 共 23 讲
0/2登录后，你可以任选2讲全文学习。
开篇词 (1讲)
开篇词 | 全面拥抱 Hooks，掌握最新 React 开发方式
免费
基础篇 (7讲)
01｜认识 React：如何创建你的第一个 React 应用？
02｜理解 Hooks：React 为什么要发明 Hooks？
03｜内置 Hooks（1）：如何保存组件状态和使用生命周期？
04｜内置 Hooks（2）：为什么要避免重复定义回调函数？
05｜进一步认识 Hooks ：如何正确理解函数组件的生命周期？
06｜自定义Hooks ：四个典型的使用场景
07｜全局状态管理：如何在函数组件中使用 Redux？
实战篇 (10讲)
08｜复杂状态处理：如何保证状态一致性？
答疑解惑01｜如何转换应用React Hooks 的思路？
09｜异步处理：如何向服务器端发送请求？
10｜函数组件设计模式：如何应对复杂条件渲染场景？
11｜事件处理：如何创建自定义事件？
12｜项目结构：为什么要按领域组织文件夹结构？
13｜Form：Hooks 给 Form 处理带来了哪些新变化？
14 | 使用浮动层：如何展示对话框，并给对话框传递参数？
15 | 路由管理：为什么每一个前端应用都需要使用路由机制？
16 | 按需加载：如何提升应用打开速度？
16 | 按需加载：如何提升应用打开速度？
王沛 2021-07-01
你好，我是王沛。今天我们来聊聊如何提升 React 应用的打开速度。
随着前端技术的不断演进，以及浏览器性能的不断提高，前端应用的开发也变得越来越复杂，因为更多的功能被放到了前端去实现。
这也让我们面临这样一个挑战：如何控制好整个应用的大小，以及如何提升加载性能，才能确保应用的打开速度够快。
我们来分析一下，看怎么解决这个问题。在应用加载的性能指标中，其中一个很重要的指标就是首屏打开速度。也就是说，当用户打开你的应用之后，他要花多久才能看到首页面。根据统计显示，如果首页打开时间超过 3 秒，那么就会流失掉 40% 的用户。所以这项指标的重要性不言而喻，也让我们在完成需求开发的同时，要时刻有意识地去控制包的大小。要知道，包越小，首屏打开速度就越快。
照此来看，为了提高首屏加载速度，我们就需要对应用进行分包。
首先，在打开某个页面时，只加载这个页面相关的内容，也就是按需加载。
同时，为了提升后续应用的打开速度，就需要采用高效的缓存策略，避免前端资源的重复下载。
所以这节课，我们首先来看看在 React 应用中如何实现按需加载。然后呢，我会和你介绍下 Service Worker 技术，看看怎么利用 Service Worker 来缓存前端资源。虽然它和 React 没有必然的联系，但是作为目前最为有效的提升加载性能的手段，你也需要进行了解并能正确使用。
确认放弃笔记？
放弃后所记笔记将不保留。
新功能上线，你的历史笔记已初始化为私密笔记，是否一键批量公开？
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《React Hooks 核心原理与实战》，如需阅读全部文章，
请订阅文章所属专栏，新⼈⾸单¥59.9
请订阅文章所属专栏，新⼈⾸单¥59.9
立即订阅
登录 后留言
精选留言(2)
Geeker之前项目中有一个需求是，合并多个指定 url 的请求（高频请求，请求地址相同，请求参数不同），想合并请求参数并只请求一次。不知道这样的需求用 service worker 是不是可以实现，求思路，谢谢。2021-07-011
珍惜眼前人老师好，serviceWorker的代码，可以加到 https://codesandbox.io/s/react-hooks-course-20vzg
吗，想跟着实现一下2021-07-02
收起评论