React 新特性 03

最新推荐文章于 2024-09-20 00:00:00 发布

wangleijie98

最新推荐文章于 2024-09-20 00:00:00 发布

阅读量1k

点赞数 20

分类专栏：前端知识点梳理文章标签： react.js arcgis 前端

本文链接：https://blog.csdn.net/wangleijie98/article/details/135139413

版权

前端知识点梳理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

本系列文章主要以知识总结为主及梳理，不是面试题，主要目的是方便自己复习以及为大家提供便利，所以大部分知识点来源于网上，侵权联系删除。如有不对的地方欢迎大家评论区批评指正，一起进步！

正文

去年3月份，React 18正式版发布，也正是放弃了对IE11的支持，如果需要兼容IE11，估计还是要使用17版本

如何使用React18

老项目：把package.json文件中react版本号改成最新的，然后删除node_modules文件，重新

npm i

yarn

新项目：直接安装最新依赖即可

npm i react react-dom --save

npm i @types/react @types/react-dom -D

react18新特性

1. setState自动批量处理

a. 在18之前，只有react事件处理函数中，才会自动批量处理，其他情况会进行多次render，其余事件例如setTimeout、document.body.addEventListener('click',()=>{})等都会出现多次渲染
b. 在18之后这些不是react事件处理的函数也会进行批量渲染，减少render，提高了整体的性能，除非在一个事件中，一个set使用await，一个不用，那这会出现两次render

2. flushSync

a. 如果你不需要批量处理怎么办，那就可以使用flushSync，

<div
onClick={() => {
  flushSync(() => {
    setCount1(count => count + 1);
  });
  // 第一次更新
  flushSync(() => {
    setCount2(count => count + 1);
  });
  // 第二次更新
}}
>

注意：flushSync回调中还是会进行批量处理

3. Reac组件的返回值

a. 在17版本中，如果你需要返回一个空组件，React只允许返回一个null，如果你返回一个undefined，控制台则会在运行的时候抛出一个错误
b. 在18版本中，既支持返回null，也支持返沪undefined，返回undefined也不会导致页面崩溃。但在18版本中的dts文件还是会进行检查，返回undefined会进行报错，你可以忽略这个错误。

4. Strict Mode

a. 我们都知道在使用严格模式时，React会对每个组件进行两次渲染，以便我们观察意想不到的效果，17版本中，React取消了一次渲染的日志，方便阅读
b. 在18版本中，第二次渲染的日志信息显示为灰色，以柔和的方式出现在控制台中

5. Suspense不再需要fallback来捕获

a. Suspense 组件没有提供 fallback 属性，React 就会悄悄跳过它，继续向上搜索下一个边界：

// React 17
const App = () => {
  return (
    <Suspense fallback={<Loading />}> // <--- 这个边界被使用，显示 Loading 组件
      <Suspense>                      // <--- 这个边界被跳过，没有 fallback 属性
        <Page />
      </Suspense>
    </Suspense>
  );
};

export default App;

React 工作组发现这可能会导致混乱、难以调试的情况发生。例如，你正在debug一个问题，并且在没有 fallback 属性的 Suspense 组件中抛出一个边界来测试一个问题，它可能会带来一些意想不到的结果，并且不会警告说它没有fallback 属性,让你难以定位问题的存在。
b. React将使用当前组件的 Suspense 作为边界，即使当前组件的 Suspense 的值为 null 或 undefined

6. useId(新增API)

const id = useId();同一个组件在客户端和服务端生成相同的唯一ID，避免hydration 的不兼容，这解决了react17之前中的问题，因为在我们服务器渲染时提供的HTML，是无序的，useId的原理就是每个id代表改组件在组件树中的层级结构。

7. Concurrent Mode（并发模式）

a. Concurrent Mode中文并发模式。他不是一个功能而是一个底层设计
b. 并发模式可帮助应用保持响应，并根据用户设备性能和网速进行适当的调整，该模式通过渲染可中断修复阻塞渲染限制，在CM模式中，React可以同时有多个状态，我们可以理解成，在17版本中从同步不可中断变成了现在的异步可中断

8. Render API

为了更好管理root节点，18中引入了一个新的API root API，新的root api支持并发模式的渲染（new concurrent renderer），它允许你进入并发模式。
a. 挂载组件时

// React 17
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const root = document.getElementById('root')!;

ReactDOM.render(<App />, root);

// React 18
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = document.getElementById('root')!;

ReactDOM.createRoot(root).render(<App />);

b. 卸载组件时

// React 17
ReactDOM.unmountComponentAtNode(root);

// React 18
root.unmount();

备注：开启了并发模式并不是开启了并发更新，17版本中的确是这样，在18中，不在有多种模式，而是以是否使用并发特性，作为是否开启并发更新的依据。

从架构的方面看：

● v15以前：采用Stack架构，不可中断的递归方式
● v16 v17: 采用的Fiber架构，中断可遍历，未开启并发更新，
● v18：采用的Fiber架构，中断可遍历，默认情况下未开启并发更新，但是可以通过Render API 开启并发模式，和并发更新
开启并发模式后有两个新的api
● startTransition
● useDeferredValue
如果有兴趣的可以自行查阅

仅仅是本人的一些学习笔记，如有错误，欢迎一起交流。