React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
10740 人已学习
新⼈⾸单¥59
登录后,你可以任选2讲全文学习
课程目录
已完结/共 25 讲
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

20 | React 的未来:什么是服务器端组件?

你好,我是王沛。今天我们来聊聊 React 还有哪些值得期待的新特性。
React 自诞生到现在,已经有七八年的时间了,不知道你是不是和我有一样的疑惑。React 好像这么多年来就发布了一个 React Hooks,除此之外就没有什么其他新功能了。那么,React 团队到底在做哪些事情呢?其实我们只要仔细想一想,这个疑惑也挺容易解开。
一方面,React 的 API 足够稳定,这就让我们开发人员不太能感知到一些内部的优化。比如在 2017 年,React 就基于 Fiber 的架构重写了整个 React,优化了渲染的机制,为之后的 Suspense 等特性提供了基础。
另一方面,React 团队其实一直在探索一些新的前端开发方式,只是不到足够成熟就不会正式发布。比如 Suspense,作为一个试验特性,它已经推出有三年多了,但官方一直没有宣布正式可用。而最近提出的一个新的服务器端组件的概念,虽然让人眼前一亮,但同样也还处于探索和开发阶段。
不过,了解 React 17.0 版本,还是十分有必要的,能让我们对 React 的未来会有哪些新特性,做到心中有数。
所以今天这节课,我们就来看下 React 17.0 这个没有新特性的版本带来了什么新变化。然后再通过例子,去学习 Suspense 和服务器端组件,看看它们究竟是什么,试图去解决哪些问题。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React 17.0版本虽未引入新特性,却为未来功能铺平道路。渐进升级支持允许多个React版本同时存在,实现更平滑的升级过程。新的事件模型解决了多版本React之间的事件冲突问题。新的JSX编译机制使代码不再需要引入React,更加直观。此外,服务器端组件和Suspense等新特性展示了React团队在探索新的前端开发方式。Suspense实现了挂起当前组件的渲染,优化性能并简化异步请求处理逻辑。Server Components能在服务器端渲染组件,简化数据逻辑和提升性能。这些变化为React的未来发展提供了更灵活的可能性,为即将到来的新特性和功能做好了准备。 Server Components是一个非常令人期待的特性,对于对性能有极致需求的服务器端渲染的应用,会带来极大的帮助。虽然在API上没有明显的变化,但是它为以后的渐进式版本更新提供了基础,并且基于新的 JSX 的处理机制,让你不再需要在代码中import React。接着,我们了解了React中一个“古老”的新特性——Suspense。这个特性虽然仍然处于实验阶段,但其实已经非常稳定了。而我们要做的,就是等待它正式发布,然后去看看社区中还会提供哪些更好用的开发方式。最后,我介绍了一个非常令人兴奋的服务器端组件的提案。可以说,它为我们去开发极致性能的React应用提供了一个很好的基础。虽然功能还在开发中,但是非常值得期待。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Hooks 核心原理与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(11)

  • 最新
  • 精选
  • 竹杖
    看完专栏感觉稍微有点失落,这就结束了?本想着有些Hook的内部深入解析之类的,感觉还是停留在api使用的层面上,入门吧

    作者回复: 如何在合适的场景使用 API,以及每个 API 解决的问题是什么,是我们这么课的重点,也是使用好 Hooks 的关键。而深入解析 Hooks 在源码层面是如何实现的,则有助于的是在你要自己实现 Hooks 这样的框架时,应该如何去设计实现。理解源码并不能让你更好的使用 API,两个层面的问题。

    2021-07-14
    3
    20
  • Geek_413aa8
    react 18 Alpha 版本不是已经发布了;希望老师给讲解一下

    作者回复: 其实这一课已经包含了服务器端组件的简单介绍,正是React 18 alpha 的内容。

    2021-07-12
    3
  • lunar
    从视频追到专栏, 这又双双双结束了?

    编辑回复: 是不是有点舍不得

    2021-07-10
    2
    1
  • Dark I
    这就结束了 好快啊

    作者回复: 是的,React Hooks 本身就这些方面。更多的生态需要自己去慢慢发现:-)

    2021-07-12
  • lunar
    从视频追到专栏,这又双叒叕要结束了?我一个做后端的也不知道为啥对这门课这么感兴趣, 莫非是老师讲得太好了!😂
    2021-07-10
    4
  • 闲闲
    老师我有几个问题咨询下 1、对于事件冲突,其实我没有太理解,我记得用addeventLicense监听的事件,即便是同一个dom绑定也是不会冲突的,那怎么来说,事件应该不会冲突吧,是有其他场景或者应该是我对事件理解不深,还请老师解答 2、对于服务器端渲染的问题,react是状态驱动的,服务器端渲染的话,这个状态驱动是怎么实现的呢?另外对于一些复杂界面,状态可能很复杂也很容易变化,那服务器端渲染会不会给服务器造成压力呢?
    2021-07-11
    2
    2
  • Geek_4e92cc
    问个问题:class组件中 this.foreUpdate(), 是当前组件重新render 还是 整个组件树重新render?
    2022-05-30
    1
  • 浩明啦
    在微前端里,多个 react 16 的微应用可能会出现问题
    2021-07-10
    1
  • 大神博士
    Suspense 很奇怪哎,是不是会造成 ui 页面的闪烁,突然一个 fallback 的 loading
    2022-02-17
  • 七秒
    这就结束了 意犹未尽,老师讲得很好!
    2021-10-27
收起评论
显示
设置
留言
11
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部