React16、17、18版本新特性

react-16版本新特性

一、hooks

import { useState } from 'react' function App() { // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0 // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState） const [count, setCount] = useState(0) return ( <button onClick={() => { setCount(count + 1) }}>{count}</button> ) } export default App

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

二、memo、lazy、Suspense

import React, { Suspense } from 'react'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

三、Profiler

Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销

function onRenderCallback( id, // 发生提交的 Profiler 树的 “id” phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一 actualDuration, // 本次更新 committed 花费的渲染时间 baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间 startTime, // 本次更新中 React 开始渲染的时间 commitTime, // 本次更新中 React committed 的时间 interactions // 属于本次更新的 interactions 的集合 ) { // 合计或记录渲染时间。。 console.log( id, // 发生提交的 Profiler 树的 “id” phase, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一 actualDuration, // 本次更新 committed 花费的渲染时间 baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间 startTime, // 本次更新中 React 开始渲染的时间 commitTime, // 本次更新中 React committed 的时间 interactions // 属于本次更新的 interactions 的集合 ); } //Navigation update 0 0 57313.90000009537 57314.5 Set(0) {size: 0} <Profiler id="Navigation" onRender={onRenderCallback}> <div onClick={() => { setNumber((e) => e + 1); }} > test </div> </Profiler>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

四、createContext、createRef、forwardRef、生命周期函数的更新、Strict Mode

// 父组件中 const ThemeContext = React.createContext("light"); const ParentComponent = () => { const inputRef = createRef(); return ( <ThemeContext.Provider value="dark"> <ChildComponent ref={inputRef} /> <button onClick={() => { inputRef.current.focus(); }} > 获取焦点 </button> </ThemeContext.Provider> ); } //子组件 const ChildComponent = forwardRef((props, inputRef) => { const value = useContext(ThemeContext); return ( <> <input id="input" type="text" ref={inputRef} /> <button style={{ background: "yellow" }} onClick={() => { console.log(value); }} > 测试 </button> </> ); });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

五、Fragment

<React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment>

• 1
• 2
• 3
• 4
• 5

六、createPortal

ReactDOM.createPortal(child, container)

• 1

react-17版本新特性

一、全新的 JSX 转换

React 17以前，React中如果使用JSX，则必须像下面这样导入React，否则会报错，这是因为旧的 JSX 转换会把 JSX 转换为 React.createElement(…) 调用。

import React from 'react'; export default function App(props) { return <div>app </div>; }

• 1
• 2
• 3
• 4

二、事件委托的变更

在 React 16 或更早版本中，React 会由于事件委托对大多数事件执行 document.addEventListener()。但是一旦你想要局部使用React，那么React中的事件会影响全局，当把React和jQuery一起使用，那么当点击input的时候，document上和React不相关的事件也会被触发，这符合React的预期，但是并不符合用户的预期。

React React17不再将事件添加在document上，而是添加到渲染 React 树的根 DOM 容器中：

const rootNode = document.getElementById('root'); ReactDOM.render(<App />, rootNode);

• 1
• 2

三、事件系统相关更改

除了事件委托这种比较大的更改，事件系统上还发生了一些小的更改，与以往不同，React 17中onScroll 事件不再冒泡，以防止出现常见的混淆 。

React 的 onFocus 和 onBlur 事件已在底层切换为原生的 focusin 和 focusout 事件。它们更接近 React 现有行为，有时还会提供额外的信息。

捕获事件（例如，onClickCapture）现在使用的是实际浏览器中的捕获监听器。这些更改会使 React 与浏览器行为更接近，并提高了互操作性。

注意：尽管 React 17 底层已将 onFocus 事件从 focus 切换为 focusin，但请注意，这并未影响冒泡行为。在 React 中，onFocus 事件总是冒泡的，在 React 17 中会继续保持，因为通常它是一个更有用的默认值。请参阅 sandbox ，以了解为不同特定用例添加不同检查。

四、去除事件池

在React 17 以前，如果想要用异步的方式使用事件e，则必须先调用调用 e.persist() 才可以，这是因为 React 在旧浏览器中重用了不同事件的事件对象，以提高性能，并将所有事件字段在它们之前设置为 null。如下面的例子：

function FunctionComponent(props) { const [val, setVal] = useState(""); const handleChange = e => { // setVal(e.target.value); // React 17以前，如果想用异步的方式使用事件e，必须要加上下面的e.persist()才可以 // e.persist(); // setVal(data => e.target.value); }; return ( <div className="border"> <input type="text" value={val} onChange={handleChange} /> </div> ); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

但是这种使用方式有点抽象，经常会让对React不太熟悉的开发者懵掉，但是值得开心的是，React 17 中移除了 “event pooling（事件池）“，因为以前加入事件池的概念是为了提升旧浏览器的性能，对于现代浏览器来说，已经不需要了。因此，上面的代码中不使用e.persist()；也能达到预期效果。

五、副作用清理时间

React 17以前，当组件被卸载时，useEffect和useLayoutEffect的清理函数都是同步运行，但是对于大型应用程序来说，这不是理想选择，因为同步会减缓屏幕的过渡（例如，切换标签），因此React 17中的useEffect的清理函数异步执行，也就是说如果要卸载组件，则清理会在屏幕更新后运行。如果你某些情况下你仍然希望依靠同步执行，可以用 useLayoutEffect。

当然React 17中的useEffect的清理函数异步执行之后，有一个隐患：

useEffect(() => { someRef.current.someSetupMethod(); return () => { someRef.current.someCleanupMethod(); }; });

• 1
• 2
• 3
• 4
• 5
• 6

问题在于 someRef.current 是可变的，因此在运行清除函数时，它可能已经设置为 null。解决方案是在副作用内部存储会发生变化的值：

useEffect(() => { const instance = someRef.current; instance.someSetupMethod(); return () => { instance.someCleanupMethod(); }; });

• 1
• 2
• 3
• 4
• 5
• 6
• 7

我们不希望此问题对大家造成影响，我们提供了 eslint-plugin-react-hooks/exhaustive-deps 的 lint 规则（请确保在项目中使用它）会对此情况发出警告。

六、返回一致的 undefined 错误

在 React 16 及更早版本中，返回 undefined 始终是一个错误，当然这是React的预期，但是由于编码错误 ，forwardRef 和 memo 组件的返回值是undefined的时候没有做为错误，React 17中修复了这个问题。React中要求对于不想进行任何渲染的时候返回 null

七、原生组件栈

在 React 17 中，使用了不同的机制生成组件调用栈，该机制会将它们与常规的原生 JavaScript 调用栈缝合在一起。这使得你可以在生产环境中获得完全符号化的 React 组件调用栈信息。

八、移除私有导出

React 17删除了一些以前暴露给其他项目的 React 内部组件。特别是，React Native for Web 过去常常依赖于事件系统的某些内部组件，但这种依赖关系很脆弱且经常被破坏。

在 React 17 中，这些私有导出已被移除。据我们所知，React Native for Web 是唯一使用它们的项目，它们已经完成了向不依赖那些私有导出函数的其他方法迁移。

九、启发式更新算法更新

React 16开始替换掉了Stack Reconciler，开始使用启发式算法架构的的Fiber Reconciler。那么为什么要发生这个改变呢？

React的killer feature： virtual dom

• React15.x - Stack Reconciler
• React16 - Fiber Reconciler
• React17 - Fiber Reconciler (进阶版 - 优先级区间)

1、为什么需要fiber：对于大型项目，组件树会很大，这个时候递归遍历的成本就会很高，会造成主线程被持续占用，结果就是主线程上的布局、动画等周期性任务就无法立即得到处理，造成视觉上的卡顿，影响用户体验。

2、任务分解的意义：解决上面的问题

3、增量渲染（把渲染任务拆分成块，匀到多帧）

4、更新时能够暂停，终止，复用渲染任务

5、给不同类型的更新赋予优先级

6、并发方面新的基础能力

7、更流畅

React 17中更新了启发式更新算法，具体表现为曾经用于标记fiber节点更新优先级的expirationTime换成了为lanes，前者为普通数字，而后者则为32位的二进制，了解二进制运算的都比较熟悉了，这种二进制的lanes是可以指定几个优先级的，而不是像以前expirationTime只能标记一个。

之所以做这种改变，原因就是在于expirationTimes模型不能满足IO操作（Suspense），Suspense用法如下：

<React.Suspense fallback={<Loading />}> <Content /> </React.Suspense>

• 1
• 2
• 3

react-18版本新特性

一、客户端渲染 API

带有 createRoot() 的 root API，替换现有的 render() 函数，提供更好的人体工程学并启用新的并发渲染特性。

import { createRoot } from "react-dom/client"; import { useState } from 'react' const App = () => { const [A, setA] = useState(1); const [B, setB] = useState(1); const handleClick = () => { setA((a) => a + 1); setB((b) => b - 1); }; setTimeout(() => { setA((a) => a + 1); setB((b) => b - 1); }, 1000); return (<div> <p>{A}</p> <p>{B}</p> </div>); }; const container = document.getElementById("app"); const root = createRoot(container); root.render(<App />); root.unmount(); //卸载组件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

如果你的项目使用了ssr服务端渲染，需要把ReactDOM.hydrate升级为ReactDOM.hydrateRoot

import { hydrateRoot } from "react-dom/client"; const container = document.getElementById("app"); const root = hydrateRoot(container, <App tab="home" />);

• 1
• 2
• 3
• 4

在某些场景下 我们可能不需要批处理状态更新, 此时我们需要用到 react-dom 提供的flushSync函数, 该函数需传入一个回调, 并且会同步刷新回调中的状态更新

import { useState } from 'react' import { flushSync } from 'react-dom' function App() { const [num1, setNum1] = useState(1) const [num2, setNum2] = useState(1) const add = () => { setTimeout(() => { flushSync(() => { setNum1((pre) => pre + 1) }) flushSync(() => { setNum2((pre) => pre + 1) }) }) } console.log('渲染了') console.log(num1, num2) return ( <div className="App"> <header className="App-header">react 18</header> <p>num1 : {num1}</p> <p>num2 : {num2}</p> <button onClick={add}>+1</button> </div> ) } export default App

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

二、严格模式更新

React 18 带来了大把新特性，此外还有很多新特性正在路上。为了让你的代码为此做好准备，StrictMode 变得更加严格了。最重要的是，StrictMode 将测试组件对可重用状态的弹性，模拟一系列的挂载和卸载行为。它旨在让你的代码为即将推出的特性（可能以组件的形式）做好准备，这将在组件的挂载周期中保留这个状态。

虽然它肯定会在未来提供更好的性能，但就目前而言，启用 StrictMode 时必须要考虑这个事情。

除了以上提到的更改之外，根据你的 React 代码库，你可能还会发现其他一些更改。

值得一提的是，React 18 将不再支持 IE 浏览器，因为 React 18 现在依赖很多现代浏览器特性，如 Promise 或 Object.assign。

其余的更改与一些 React 行为的稳定性和一致性有关，不太可能影响你的代码库。

三、Transition

Transition 是由并发渲染提供支持的新特性之一。它旨在与现有状态管理 API 一起使用，以区分紧急和非紧急状态更新。通过这种方式，React 知道哪些更新需要优先考虑，哪些更新需要在后台通过并发渲染准备。

import { useTransition, useState } from "react"; const App = () => { const [isPending, startTransition] = useTransition(); const [value, setValue] = useState(0); function handleClick() { startTransition(() => { setValue((value) => value + 1); }); } return ( <div> {isPending && <Loader />} <button onClick={handleClick}>{value}</button> </div> ); };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

在 startTransition() 回调中提交的任何状态更新都将被标记为 transition，从而使其他更新具有优先权。如果你不能使用这个钩子，还有一个单独的 startTransition() 函数可用——虽然它不会通知你转换的进度。

import { startTransition } from "react"; // ... startTransition(() => { // Transition updates }); // ...

• 1
• 2
• 3
• 4
• 5
• 6

四、Suspense更新

在状态改变时，lazy() 加载的组件将触发 Suspense，导致 fallback 元素的渲染。如果你将状态更改标记为一个 transition，React 将知道它应该在后台准备新视图，同时仍保持当前视图可见。

import { Suspense, useTransition } from "react"; const App = () => { const [value, setValue] = useState("a"); const [isPending, startTransition] = useTransition(); const handleClick = () => { startTransition(() => { setValue("b"); }); }; return ( <> <Suspense fallback={<Loader />}> <div style={{ opacity: isPending ? 0.7 : 1 }}> {value === "a" ? <A /> : <B />} </div> </Suspense> <Button onClick={handleClick}>B</Button> </> ); };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22