react这几年重大意义的变化

前言

现在几乎所有的单页面应用框架都大同小异，也就是意味着你只要精通一个框架其他的思想基本保持了一致，现在主流的react与vue也是如此，二者版本迭代也在逐渐的吸取对方的优势，他们的语法也将越来越接近。

小编最早接触react得时候，es6正是流行的时候，vue框架也刚刚起步，那时候react还基本都是通过class组件继承的形式来开发整个应用。随着不断的版本升级，react也迎来了历史性的重大改变。接下来看一下react历史性的变化。

react16.8新增Hook

它的出现绝对堪称react的历史性突破，组件不在局限于class继承的写法,而是以一个函数的形式，同时也提供了更为直观强大的api，props， state，context，refs 以及生命周期等。几乎能覆盖class写法的api

如果使用的是函数式组件，也能同时帮我们省去大量的重复的代码判断，如:

#mermaid-svg-0hbmSuyhVMcmx0vx {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .error-icon{fill:#552222;}#mermaid-svg-0hbmSuyhVMcmx0vx .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-0hbmSuyhVMcmx0vx .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-0hbmSuyhVMcmx0vx .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-0hbmSuyhVMcmx0vx .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-0hbmSuyhVMcmx0vx .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-0hbmSuyhVMcmx0vx .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-0hbmSuyhVMcmx0vx .marker{fill:#333333;stroke:#333333;}#mermaid-svg-0hbmSuyhVMcmx0vx .marker.cross{stroke:#333333;}#mermaid-svg-0hbmSuyhVMcmx0vx svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-0hbmSuyhVMcmx0vx .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .cluster-label text{fill:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .cluster-label span{color:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .label text,#mermaid-svg-0hbmSuyhVMcmx0vx span{fill:#333;color:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .node rect,#mermaid-svg-0hbmSuyhVMcmx0vx .node circle,#mermaid-svg-0hbmSuyhVMcmx0vx .node ellipse,#mermaid-svg-0hbmSuyhVMcmx0vx .node polygon,#mermaid-svg-0hbmSuyhVMcmx0vx .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-0hbmSuyhVMcmx0vx .node .label{text-align:center;}#mermaid-svg-0hbmSuyhVMcmx0vx .node.clickable{cursor:pointer;}#mermaid-svg-0hbmSuyhVMcmx0vx .arrowheadPath{fill:#333333;}#mermaid-svg-0hbmSuyhVMcmx0vx .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-0hbmSuyhVMcmx0vx .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-0hbmSuyhVMcmx0vx .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-0hbmSuyhVMcmx0vx .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-0hbmSuyhVMcmx0vx .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-0hbmSuyhVMcmx0vx .cluster text{fill:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx .cluster span{color:#333;}#mermaid-svg-0hbmSuyhVMcmx0vx div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-0hbmSuyhVMcmx0vx :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

componentDidMount + componentDidUpdate + componentWillUnmount

useEffect

React18并发

大家都知道js是单线程的编程语言，即上游不执行结束，下游就会有对应的影响，对用户来讲很有可能界面就会面临短暂性的卡死情况。假如我们执行了一次setState，但是这个setState是比较耗时的，这时候用户在此期间几乎是无法交互的。因此在react18中提出了并发这个概念

react团队基于时间切片（time slicing）与Scheduler调度完成了此类的优化，其实就是通过Fiber结构将不紧急的更新拆分成多段更新，并通过宏任务的方式将其合理分配到浏览器的帧当中。

react18新增了几个对应的Hook API:

`Suspense` 新增`fallback`属性

在v18中，Suspense加入了fallback属性，用于将读取数据和指定加载状态分离。这样就不用去过多的关注页面的加载状态，也能节约大量的代码。

<Suspense fallback={<div>Loading...</div>}><components />
</Suspense>

`useTransition/useDeferredValue`

由于渲染界面会占用线程，因此导致用户输入时，无法立即响应，useDeferredValue快速变化的时候，React会合并触发的更新，渲染最后的一个更新。
常见的像防抖节流的函数，虽然利用了setTimeout解决了频繁触发的问题，但是是无法解决更新耗时过长的问题。
在每次更新之前，useTransition会将优先级更新为transition，低优先级进行，再通过时间切片的形式，从而不阻塞其他紧急的渲染。

import React, { useState, useDeferredValue, useTransition } from 'react'const Defer = () => {const [searchValue, setSearchValue] = useState(100)const deferredSearchValue = useDeferredValue(searchValue)const [loading, startTransition] = useTransition(500);return (<><inputtype="number"value={searchValue}onChange={(e) => {startTransition(()=>{setSearchValue(Number(e.target.value) || 0)})}}/>{loading?(<p>loading...</p>):(new Array(deferredSearchValue).fill(0).map((_, idx) => (<li key={idx}>{idx}</li>)))}</>)
}export default Defer

`useSyncExternalStore`

相当于对并发更新使用到的额外数据进行监听，当并发更新时数据发生变化，进行强制渲染。这个通常我们的实际业务中用不到，可以自行了解。