React18新增特性介绍

React 18 最新的特性
批处理文件
在同一个 函数中, 调用多次 useState 也只是会更新一次

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  function handleClick() {
    setCount(c => c + 1); // 不触发re-render
    setFlag(f => !f); // 不触发re-render
    // 在调用结束是只触发一次re-render（这就是batching）
  }
  return <button onClick={handleClick}>Next</button>;
}

但是在React 18以前，对于在异步回调中调用的updates，React Batching将无法生效：

function handleClick() {
  fetchSomething().then(() => {
  setCount(c => c + 1); // 触发re-render
  setFlag(f => !f); // 再次触发re-render
  });
}

这是因为在React 18之前，React只在事件处理程序期间批量更新。默认情况下，React不会对promise、setTimeout或任意event事件中的更新进行批处理。
在 React 18 版本 的这个flushSync 就可以达到批量更新

import { flushSync } from 'react-dom';
flushSync(() => {
setCount(c => c + 1);
setFlag(f => !f);
});

批量更新 但是render 值渲染一次, 节省了 dom的渲染性能

更新状态：

紧急更新（Urgent updates）：反映直接的交互，如输入、点击、按键按下等等。

过渡更新（Transition updates）：将UI从一个视图过渡到另一个视图。

输入、点击、按键按下等需要立即响应以符合人类的物理认知，符合人的直觉。但是过渡更新却不同，用户不会期望看到中间的转换过程（只需要结果），因此可能不需要立即更新视图。
在React 18以前的版本所有的更新都会认为是紧急更新。而startTransition提供api给用户来手动将某些更新标记为非紧急更新，从而避免浪费时间去渲染不必要的内容。

如下面的例子：

// 在界面上显示用户输入

setInputValue(input);

// 在界面上呈现查询结果

setSearchQuery(input);

setInputValue会立即更新用户的输入到界面上，属于需要紧急更新的操作。setSearchQuery是根据用户输入，查询相应的内容，用户可以输入很多次，如果一直查询会可能会导致过多的js计算消耗在查询上面（甚至阻塞输入操作），而一般来说用户的期望值是「等待输入完成之后，查询并显示最终的结果」，因此这里的setSearchQuery可以看成是非紧急更新。
通过startTransition包裹setSearchQuery将其标记为非紧急更新：

setInputValue(input);
// 标记为非紧急更新
startTransition(() => {
React.setSearchQuery(input);
});

setTimeout的区别

就上面setSearchQuery的例子，使用setTimeout（或者debounce or throttle）也能达到相似的目的，那这个startTransition和setTimeout有啥区别？
一个重要区别是setTimeout是「延迟」执行，startTransition是立即执行的，传递给startTransition的函数是同步运行，但是其内部的所有更新都会标记为非紧急，React将在稍后处理更新时决定如何render这些updates，这意味着将会比setTimeout中的更新更早地被render。

到此这篇关于React18新增特性介绍的文章就介绍到这了,更多相关React新特性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 十分钟带你快速了解React16新特性

    前段时间React的16版本发布了,采用了MIT开源许可证,新增了一些新的特性. Error Boundary render方法新增返回类型 Portals 支持自定义DOM属性 setState传入null时不会再触发更新 更好的服务器端渲染 新的打包策略 ... 1. 使用Error Boundary处理错误组件 之前,一旦某个组件发生错误,整个组件树将会从根节点被unmount下来.React 16修复了这一点,引入了Error Boundary的概念,中文译为"错误边界",当某

  • React18新增特性released的使用

    目录 新功能:Automatic Batching 新功能:Transitions 新的Suspense功能 新的客户端和服务器Rendering APIs React DOM Client React DOM Server 新的Strict Mode Behaviors 新Hooks React 18 中的新增功能 新功能:Automatic Batching 批处理是指 React 将多个状态更新分组到单个重新呈现中以获得更好的性能.在没有自动批处理的情况下,我们只在 React 事件处理程

  • React团队测试并发特性详解

    目录 引言 遇到的困境 1. 如何表达渲染结果? 2. 如何测试并发环境? React的应对策略 实现一个渲染器 如何测试并发环境? 总结 引言 React18进入大家视野已经有一段时间了,不知道各位有没有尝试并发特性呢? 当启用并发特性后,React会从同步更新变为异步.带优先级.可中断的更新. 这也为编写单元测试带来了一些难度. 本文来聊聊React团队如何测试并发特性. 遇到的困境 主要有两个问题需要面对. 1. 如何表达渲染结果? React可以对接不同宿主环境的渲染器,大家最熟悉的渲染

  • React18新增特性介绍

    React 18 最新的特性批处理文件在同一个 函数中, 调用多次 useState 也只是会更新一次 function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 不触发re-render setFlag(f => !f); // 不触发re-render //

  • MySQL8.0.11版本的新增特性介绍

    MySQL 8.0 for Windows v8.0.11 官方免费正式版 64位 一. 数据字典(Data dictionary) 1)合并了存储数据库对象信息的事务性数据字典:之前版本是存储于元数据文件和非事务表中 : 二.原子数据定义语句(原子DDL)(Atomic Data Definition Statements (Atomic DDL)) 三.安全性和账户管理(Security and account management) 1)A new caching_sha2_passwor

  • Vue.js 2.5新特性介绍(推荐)

    Vue.js 2.5新特性介绍(推荐)

    TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.2012年十月份,微软发布了首个公开版本的TypeScript,在2013年6月19日,微软发布了TypeScript 0.9的正式版本,到目前为止,TypeScript已发展到2.x版本 安装TypeScript 安装TypeScript主要有两种方式: 通过npm方式安装(Node.js包管理器) 安装TypeS

  • PHP 7.0新增加的特性介绍

    ?? 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1;它相当于: <?PHP $a = isset($_GET['a']) ? $_GET['a'] : 1; 我们知道三元运算符是可以这样用的: $a ?: 1但是这是建立在 $a 已经定义了的前提上. ?? 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1; 它相当于: <?php $a = iss

  • webpack 4.0.0-beta.0版本新特性介绍

    webpack 4.0.0-beta.0版本新特性介绍

    近年来前端技术如雨后春笋般蓬勃发展,我们也在这个潮流下不断地学习.成长.前端技术的不断发展,给我们提供了许多的便利.例如:JSX的出现为我们提供了一个清晰.直观的方式来描述组件树,LESS/SASS的出现提高了我们书写css的能力,AMD/CommonJS/ES6 的出现为我们模块化开发提供了便利.然而,我们需要使用其它工具将这些工具转化成原生语言以运行在浏览器上.为了能够更好的将这些不同的资源整合到一起,我们就需要一个打包工具,webpack就是这个需求下的产物. webpack 可以看做是模

  • ES2015 正则表达式新增特性

    ES2015 正则表达式新增特性: 在原来正则表达式基础上,ES2015增强了对四字节unicode字符的支持等功能. 更多正则表达式内容可以参阅正则表达式教程板块. 一.RegExp构造函数的使用: 在ES2015之前,使用RegExp构造函数创建正则表达式对象有两种方式: 创建方式一: var reg = new RegExp("antzone","g"); 构造函数的第一个参数是正则表达式字符串主体,第二个参数是正则表达式修饰符. 上面的代码等价于下面代码:

  • Hibernate5新特性介绍

    在hibernate5中,有了一些新的变动: 新引导 API Spatial/GIS 支持 Java 8 支持 扩展 AUTO id 生成支持 命名策略分离 属性转换器支持 更好的 "bulk id table" 支持 事务管理 模式工具链 Session API类化 改进 OSGi 支持 改进 bytecode 增强功能 新的引导API 用来引导Hibernate(建立一个SessionFactory)的经典方式一直都是利用Configuration配置类.从

  • ES6中非常实用的新特性介绍

    ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前

  • Netbeans 8.2与PHP相关的新特性介绍

    Netbeans 8.2与PHP相关的新特性介绍

    Netbeans 8.2在这个国庆期间终于发布了,其与PHP相关的新特性主要有: 支持PHP 7 详见前面翻译的一篇文章:Netbeans 8.2将支持PHP 7 编辑器功能增强 文档好像没有明确说明,我也还没有发现. PHP项目支持自定义注解 操作如下图: 然后,当你在编写代码注解时,就可以得到刚才自定义的注解提示支持. 支持Symfony 3 没什么人Care吧. 支持PHPUnit 5 PHPUnit 5系列版本已经是基于PHP命名空间化重构的版本了. 支持 phpcs.xml 配置文件

随机推荐