(超清)2023 React 18 系统入门 进阶实战《欢乐购》

在2021年 6月 8号，React 公布了 v18版的正式发布计划，并正式发布了 alpha 版。经过将近两年的正式发布前预备，在2022年 3月 29日，React 18测试版终于和我们见面了。

download：https://www.sisuoit.com/4132.htmlReact 18如果是最近几年的两个备受瞩目版，React 非官方对它抱有了众望。不然也无法将 React 17作为两个过渡阶段版，也无法光正式发布预备工作就做了两年。在过去两年，他们已经多多少少了解到一些 React 18的新机能。这首诗我会通过丰富的实例，向我们控制系统的介绍 React 18带来的改变。当然本文带入了很多个人理解，但如不对，Professionel尖萼。Concurrent ModeConcurrent Mode（以下简称 CM）翻译叫mammalian商业模式，这个概念我已经听了好几年了，因此一度非常担忧React 非官方憋了好几年的大招，会无法是两个破坏力不相容的超级大版？就像 VUE v3和 v2。现有的生态是不是都得跟着大版升级？比如说 ant design，ahooks 等。随着对 CM 的了解，我发现它其实是家畜无毒的。CM 本身并不是两个机能，而是两个下层设计，它使 React 能够与此同时预备多个版的 UI。在从前，React 在状况变更后，会已经开始预备交互式 DOM，然后图形真实 DOM，整个业务流程是以太网的。除非已经开始促发预览，只能等业务流程完全结束，期间是无法受阻的。在 CM 商业模式下，React 在继续执行过程中，每继续执行两个 Fiber，单厢看看有没有更高错误率的预览，假但如，则当前低错误率的的预览会被中止，待高错误率任务继续执行完后，再继续继续执行或再次继续执行。CM 商业模式有点类似计算机的多线程，CPU在与此同时进行的插件之间快速转换，也许 React 如果改名叫 ReactOS 了。这里举个例子：他们正在看影片，这时候扩音器响了，他们要去进门拿外卖。在 React 18从前，除非他们已经开始看影片，就无法被终止，必须等影片看完后，才会去进门。而在 React 18 CM 商业模式后，他们就能中止影片，等进门拿完外卖后，再再次继续看nsitions、streaming server rendering（INS13ZD服务器端图形），等等。React 18的大部分机能都是如前所述 CM 构架与此同时实现出来的，因此这这是两个已经开始，未来会有更多如前所述 CM 与此同时实现的高级潜能。startTransition他们假如要主动发挥 CM 的优势，那就有赖于 startTransition。React 的状况预览能分为两类：即刻预览（Urgent updates）：比如说写字、点选、拖曳等，须要立刻积极响应的行为，假如不立刻积极响应会给人很卡，或者出问题了的感觉过渡阶段预览（Transition updates）：将 UI 从两个快照过渡阶段到另两个快照。不须要即刻积极响应，有些延迟是能接受的。我从前会认为，CM 商业模式会自动帮他们区分不同错误率的预览，全屏安心享受。很遗憾的是，CM 只是提供了可受阻的潜能，预设情况下，所有的预览都是即刻预览。这是因为 React 并无法自动识别哪些预览是错误率更高的。const [inputValue, setInputValue]= useState();const onChange =(e)=>{ setInputValue(e.target.value);//预览搜索列表 setSearchQuery(e.target.value);}return ()比如说以上实例，用户的键盘输入操作后，setInputValue会立刻预览用户的输入到界面上，是即刻预览。而setSearchQuery是根据用户输入，查询相应的内容，是非即刻的。但是 React 确实没有潜能自动检测。所以它提供了 startTransition让他们手动指定哪些预览是即刻的，哪些是非即刻的。//即刻的setInputValue(e.target.value);startTransition(()=>{ setSearchQuery(input);//非紧急的});如上代码，他们通过 startTransition来标记两个非即刻预览，让该状况促发的变更变成低错误率的。光用文字描述我们可能没有体验，接下来他们通过两个实例来认识下可受阻图形对性能的爆炸提升。实例页面：https://react-fractals-git-react-18-swizec.vercel.app/如下图，他们须要画两个毕达哥拉斯树，通过两个 Slider 来控制树的倾斜。那他们的代码会很简单，如下所示，他们只须要两个 treeLeanstate 来管理状况。const [treeLean, setTreeLean]= useState(0)function changeTreeLean(event){ const value = Number(event.target.value); setTreeLean(value);}return (<>)在每次 Slider 拖曳后，React 继续执行业务流程大致如下：预览 treeLean图形 input，填充新的 value再次图形树组件 Pythagoras每一次用户拖曳 Slider，单厢同步继续执行上述三步。但当树的节点足够多的时候，Pythagoras 图形一次就非常慢，就会导致 Slider 的 value 回填变慢，用户感觉到严重的卡顿。如下图。当数的节点足够大时，已经卡到爆炸了。在 React 18从前，他们是没有什么好的办法来解决这个问题的。但如前所述 React 18 CM 的可受阻图形机制，他们能将树的预览图形标记为低错误率的，就无法感觉到卡顿了。Kapture 2022-04-10 at 21.16.29.gifconst [treeLeanInput, setTreeLeanInput]= useState(0);const [treeLean, setTreeLean]= useState(0);function changeTreeLean(event){ const value = Number(event.target.value); setTreeLeanInput(value)//将 treeLean 的预览用 startTransition 包裹 React.startTransition(()=>{ setTreeLean(value);});}return (<>)以上代码，他们通过 startTransition 标记了非即刻预览，让树的预览变成低错误率的，能被随时中止，保证了高错误率的 Slider 的体验。此时预览业务流程变为了input 预览treeLeanInput 状况变更预备新的 DOM图形 DOM树预览（这一次预览是低错误率的，随时能被中止）treeLean 状况变更预备新的 DOM图形 DOMReact 会在高错误率预览图形完成后，才会启动低错误率预览图形，因此低错误率图形随时可被其它高错误率预览受阻。当然，在低优先状况等待预览过程中，假如能有两个 Loading 状况，那就更好了。React 18提供了 useTransition来跟踪 transition 状况。const [treeLeanInput, setTreeLeanInput]= useState(0);const [treeLean, setTreeLean]= useState(0);//实时监听 transition 状况const [isPending, startTransition]= useTransition();function changeTreeLean(event){ const value = Number(event.target.value); setTreeLeanInput(value) React.startTransition(()=>{ setTreeLean(value);});}return (<>)自动批处理 Automatic Batching批处理是指 React 将多个状况预览，聚合到一次 render 中继续执行，以提升性能。比如说function handleClick(){ setCount(c => c +1); setFlag(f =>!f);// React 只会 re-render 一次，这就是批处理}在 React 18之前，React 只会在事件回调中使用批处理，而在 Promise、setTimeout、原生事件等场景下，是无法使用批处理的。setTimeout(()=>{ setCount(c => c +1); setFlag(f =>!f);// React 会 render 两次，每次 state 变化预览一次},1000);而在 React 18中，所有的状况预览，都会自动使用批处理，不关心场景。function handleClick(){ setCount(c => c +1); setFlag(f =>!f);// React 只会 re-render 一次，这就是批处理}setTimeout(()=>{ setCount(c => c +1); setFlag(f =>!f);// React 只会 re-render 一次，这就是批处理},1000);假如你在某种场景下不想使用批处理，你能通过 flushSync来强制同步继续执行（比如说：你须要在状况预览后，立刻读取新 DOM 上的数据等。）import { flushSync } from react-dom;function handleClick(){ flushSync(()=>{ setCounter(c => c +1);});// React 预览一次 DOM flushSync(()=>{ setFlag(f =>!f);});// React 预览一次 DOM}React 18的批处理在绝大部分场景下是没有影响，但在 Class 组件中，假如你在两次 setState 中间读取了 state 值，会出现不相容的情况，如下实例。handleClick =()=>{ setTimeout(()=>{ this.setState(({ count })=>({ count: count +1 }));//在 React17及之前，打印出来是{ count:1, flag: false }//在 React18，打印出来是{ count:0, flag: false } console.log(this.state); this.setState(({ flag })=>({ flag:!flag }));});};当然你能通过 flushSync来修正它。handleClick =()=>{ setTimeout(()=>{ ReactDOM.flushSync(()=>{ this.setState(({ count })=>({ count: count +1 }));});//在 React18，打印出来是{ count:1, flag: false } console.log(this.state); this.setState(({ flag })=>({ flag:!flag }));});};INS13ZD SSRSSR 一次页面图形的业务流程大概为：服务器 fetch 页面所需数据数据预备好后，将组件图形成 string 形式作为 response 返回客户端加载资源客户端合成（hydrate）最终的页面内容在传统的 SSR 商业模式中，上述业务流程是以太网继续执行的，假如其中有一步比较慢，单厢影响整体的图形速度。而在 React 18中，如前所述全新的 Suspense，支持了INS13ZD SSR，也就是允许服务器端一点一点的返回页面。假设他们有两个页面，包含了 NavBar、Sidebar、Post、Comments 等几个部分，在传统的 SSR 商业模式下，他们必须请求到 Post 数据，请求到 Comments 数据后，才能返回完整的 HTML。

Hello world

First comment

Second comment