React18 Conf 随笔

前记

本文记录了一些我认为比较重要的React18亮点，没有覆盖全部内容(像React团队介绍还有一些个人分享什么的没有摘录)，感兴趣的同学可以去看原版。

使用 React18

1. 安装 react 和 react-dom
   
   
   安装对应的版本号即可

2. 改变App加载方式
   

---

服务端渲染

服务端渲染应该是React18最大的亮点了，发布会开始的几个人讲解皆用不同的角度来讲这个服务端渲染。先来看一下React服务端渲染的发展历史和趋势：

服务端渲染的初衷是为了提升用户体验，一定程度补偿因为客户端加载庞大的组件和数据导致的页面空白带来的糟糕用户体验。

从图中可以看到，在React 16~17，开发者可以通过 React.lazy 对代码进行分块，通过对代码的分块可以尽快让页面出现组件而不至于空白一段时间。

React18 可以自动支持服务端渲染，当然此“服务端渲染”和十几年前的概念不同。服务端渲染是为了让页面更快地出现元素，而不是因为某个庞大组件导致的卡顿。

如果全部东西都使用客户端渲染，渲染的过程和结果如下：

而使用服务端渲染，渲染的过程和结果如下：

可以看到在第二个阶段页面就已经出现元素了，虽然还不能交互，但至少让用户知道了这个页面可以正常访问。

如果按照以前服务端的思维，我们把整个App当成一个整体，那我们在展示任何东西之前必须得先获取所有数据，而在填充(绑定函数、事件等等)任何组件以前必须得加载所有的组件，因此