react 18环境说明

脚手架

安装 create-react-app

npm install -g create-react-app
create-react-app demo-react

环境配置

将 package.json 里面的 "dependencies" 下面 react 的版本由稳定版 rea17 切换为 18beta版本

切换命令

npm uninstall react react-dom --save
npm install react@beta react-dom@beta --save

代码调整

将 src/index.js 进行调整

调整前

import React from 'react';
import { render } from 'react-dom';
import App from './App';render(<App />, document.getElementById('root'));

调整后

import React from 'react';
import { createRoot } from 'react-dom';
import App from './App';const root = createRoot(document.getElementById('root'));
root.render(<App />);

useTransition 使用说明

可以用来降低渲染优先级。分别用来包裹计算量大的 function和 value，降低优先级，减少重复渲染次数。

举个例子：搜索引擎的关键词联想。一般来说，对于用户在输入框中输入都希望是实时更新的，如果此时联想词比较多同时也要实时更新的话，这就可能会导致用户的输入会卡顿。这样一来用户的体验会变差，这并不是我们想要的结果。

我们将这个场景的状态更新提取出来：一个是用户输入的更新；一个是联想词的更新。这个两个更新紧急程度显然前者大于后者。

以前我们可以使用防抖的操作来过滤不必要的更新，但防抖有一个弊端，当我们长时间的持续输入（时间间隔小于防抖设置的时间），页面就会长时间都不到响应。而 startTransition 可以指定 UI 的渲染优先级，哪些需要实时更新，哪些需要延迟更新。即使用户长时间输入最迟 5s 也会更新一次，官方还提供了 hook 版本的 useTransition，接受传入一个毫秒的参数用来修改最迟更新时间，返回一个过渡期的pending 状态和startTransition函数。

源码如下：

import React, { useState, useTransition } from 'react';export default function Demo() {const [value, setValue] = useState('');const [searchQuery, setSearchQuery] = useState([]);const [loading, startTransition] = useTransition(2000);const handleChange = (e) => {setValue(e.target.value);// 延迟更新startTransition(() => {setSearchQuery(Array(20000).fill(e.target.value));});};return (<div className="App"><input value={value} onChange={handleChange} />{loading ? (<p>loading...</p>) : (searchQuery.map((item, index) => <p key={index}>{item}</p>))}</div>);
}

效果如下：

效果是不是和我们平时写的防抖差不多

探索 useTransition 源码

首先下载react18的源码，进入目录 packages\react\src\ReactHooks.js

接着查看函数 resolveDispatcher

接着在目录 packages\react\src\ReactCurrentDispatcher.js 查找对象 ReactCurrentDispatcher

然后进入目录 packages\react-reconciler\src\ReactInternalTypes.js，查找 Dispatcher

在目录 packages\react\src\ReactStartTransition.js，查找 startTransition 函数

参考资料

React迁移至18beta版本
一文梳理 React 18 新特性

react18 新特性 useTransition相关推荐

React18升级和React18新特性
背景: React官方在2022年3月29日React18版本正式发布了. 可以在官网看到,react 17 的发布时间是 2020 年 10 月 20 号,距离 React 18 发布足足间隔一年半 ...
React16、17、18版本新特性
react-16版本新特性一.hooks import { useState } from 'react'function App() {// 参数:状态初始值比如,传入 0 表示该状态的初始值为 ...
React 18 新特性（三）：渐变更新
文章目录前言一.startTransition:渐变更新举个例子模拟代码实现这个例子启用渐变更新二.useDeferredValue:返回一个延迟响应的值三.useTransition ...
你必须了解的 React 18 新特性
你必须了解的 React 18 新特性你必须了解的 React 18 新特性 1. React 18是什么? 2. 升级到 React 18 3. React 17 的问题 4. React 18 ...
我要学ASP.NET MVC 3.0（一）： MVC 3.0 的新特性
摘要 MVC经过其1.0和2.0版本的发展,现在已经到了3.0的领军时代,随着技术的不断改进,MVC也越来越成熟.使开发也变得简洁人性化艺术化. 园子里有很多大鸟都对MVC了如指掌,面对问题犹同孙悟空 ...
.NET 4.0 Interop新特性ICustomQueryInterface （转载）
.NET 4.0 Interop新特性ICustomQueryInterface 在.NET Framework v4.0发布的新功能中,在名字空间System.Runtime.InteropServ ...
oracle如何查询虚拟列,Oracle11g新特性之--虚拟列（VirtualColumn)
Oracle 11g新特性之--虚拟列(Virtual Column) Oracle 11G虚拟列Virtual Column介绍在老的 Oracle 版本,当我们需要使用表达式或者一些计算公式时, ...
mysql8导入 psc 没有数据_新特性解读 | MySQL 8.0.22 任意格式数据导入
作者:杨涛涛资深数据库专家,专研 MySQL 十余年.擅长 MySQL.PostgreSQL.MongoDB 等开源数据库相关的备份恢复.SQL 调优.监控运维.高可用架构设计等.目前任职于爱可生, ...
mysql query browswer_MySQL数据库新特性之存储过程入门教程
MySQL数据库新特性之存储过程入门教程在MySQL 5中,终于引入了存储过程这一新特性,这将大大增强MYSQL的数据库处理能力.在本文中将指导读者快速掌握MySQL 5的存储过程的基本知识,带领用 ...

react18 新特性 useTransition