您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

如何启用React并发模式

时间:2019-11-11 14:20:50  来源:  作者:

译文摘自:Kent C. Dodds 博客

前言

如何启用React并发模式

Photo by Marc Schulte

并发模式对用户体验和开发人员体验而言是一个巨大的改进。启用方法如下。

React的新并发模式刚刚在 实验发行版中发布。这是多年研究的结果,并证明了这一点。如果您想了解更多有关为何如此酷的知识,请一定要观看 Dan Abramov在JSIceland的演讲。人们开始使用它,看到一些不错的性能优势。

所有这些,请记住,这是实验性的。实验性发布渠道不尊重semver(因此,依赖它的代码可能会意外中断),并且肯定存在错误。但是早期的实验对许多人来说都是有希望的,我建议您在自己的应用中尝试一下。

一、安装它

首先,要启用并发模式,您需要具有支持此功能的React版本。在撰写本文时,React和React DOM的版本 16.11.0不支持并发模式。因此,我们需要安装该 experimental版本:

npm install react@experimental react-dom@experimental
# or: yarn add react@experimental react-dom@experimental

二、确保运行

确保您的应用正常运行,而无需进行其他任何更改。

运行您的应用程序,运行构建,运行测试/类型检查。如果 控制台中没有以前没有的新错误,则可能是React中的错误,您应该尝试进行最小程度的复制(最好在codeandbox中),然后 在React repo上打开一个新问题。

通常,我们会跳过这一步,但是我认为重要的是要确保如果有问题,您知道这些问题是从哪一步开始的!好的建议,我一般会说

三、启用并发模式

在项目的入口文件中,您可能会有类似以下内容的内容:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
const rootEl = document.getElementById('root')
ReactDOM.render(, rootEl)

要启用并发模式,您将使用新的 createRoot API:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
const rootEl = document.getElementById('root')
// ReactDOM.render(, rootEl)
const root = ReactDOM.createRoot(rootEl)
root.render()

而已。

四、无需更改

确保您的应用正常运行,而无需进行其他任何更改。

运行您的应用程序,运行构建,运行测试/类型检查。如果 控制台中没有以前没有的新错误,则可能是React中的错误,您应该尝试进行最小程度的复制(最好在codeandbox中),然后 在React repo上打开一个新问题。
如果看起来很熟悉,那是因为我从步骤2中复制/粘贴了它
但是,在这种情况下,如果发生故障或控制台中出现新错误。可能是因为您的应用中有一些代码正在使用并发模式下不支持的功能(例如字符串引用,旧版上下文或 findDOMNode)。
另外请注意,所有带有unsafe_前缀的生命周期方法现在实际上都是不安全的,使用它们会导致错误。

五、试用并发模式。

并发模式为我们启用了两个主要功能:

  1. 时间分片
  2. 悬念一切异步

如果您的应用程序中有一些用户交互很慢,请尝试一下,如果它不那么麻烦,那就是在工作中进行切片(有关更多信息,请参见Dan的演讲链接)。

您可以尝试将您的一种异步交互重构为悬念,或者尝试将其添加到应用程序中的某个位置:

const TRANSITION_CONFIG = { timeoutMs: 3000, //  Play with this number a bit...}function SuspenseDemo() { const [greetingResource, setGreetingResource] = React.useState(null) const [startTransition, isPending] = React.useTransition(TRANSITION_CONFIG) function handleSubmit(event) { event.preventDefault() const name = event.target.elements.nameInput.value startTransition(() => { setGreetingResource(createGreetingResource(name)) }) } return ( 
Suspense Demo loading greeting}>
)}function Greeting({greetingResource, isPending}) { return (

{greetingResource ? greetingResource.read() : 'Please submit a name'}

)}// make this function do something else. Like an HTTP request or somethingfunction getGreeting(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`Hello ${name}!`) // try rejecting instead... (make sure to comment out the resolve call) // reject(new Error(`Oh no. Could not load greeting for ${name}`)) }, 1500) // play with this number a bit })}// This should NOT be copy/pasted for production code and is only here// for experimentation purposes. The API for suspense (currently throwing a// promise) is likely to change before suspense is officially released.function createGreetingResource(name) { let status = 'pending' let result let suspender = getGreeting(name).then( greeting => { status = 'success' result = greeting }, error => { status = 'error' result = error }, ) return { read() { if (status === 'pending') throw suspender if (status === 'error') throw result if (status === 'success') return result }, }}class ErrorBoundary extends React.Component { state = {error: null} static getDerivedStateFromError(error) { return {error} } componentDidCatch() { // log the error to the server } tryAgain = () => this.setState({error: null}) render() { return this.state.error ? (
There was an error.
{this.state.error.message}

) : (
this.props.children
)
}
}

在codeandbox上玩这个游戏

我发现的一件事是,悬念API的级别很低,因此需要大量代码才能使其正常运行。但是很酷的事情是,这些是原子特征,可以在抽象中很好地工作并且可以轻松共享。因此,一旦获得了这种抽象,您就可以拥有金色。这很棒。

六、撤消所有更改

重新安装以前安装的最后一个稳定版本,并恢复以前的旧版本 ReactDOM.render。并发模式是实验性的,即使看起来不存在问题,也建议不要将像React这样基础的实验性软件交付。React文档甚至建议,根据应用程序的大小和所使用的第三方库,您可能永远无法交付并发模式(Facebook当前没有计划在旧版Facebook.com上启用并发模式)。

还请记住,作为一个社区,我们才刚刚开始研究这些东西,因此,围绕不同方法进行权衡仍然存在很多未知数。这是一个令人兴奋的时刻。但是,如果您重视稳定性,那么可能会假装并发模式和暂挂片刻不存在。

七、启用严格模式

未通过严格模式的应用程序不太可能在并发模式下正常运行。因此,如果您要努力在应用程序上启用并发模式,请启用严格模式。关于严格模式的一件好事是(与并发模式不同)它可以逐步采用。因此,您可以将严格模式仅应用于代码库中您知道符合标准的部分,然后随着时间的流逝获得完全支持。

结语

我非常期待稳定并发模式和Suspense的稳定发布,以便进行数据提取。当框架和库利用这些新功能时,它将变得更加酷。就像React Hooks对于React生态系统一样棒,我认为Concurrent Mode对开发人员的经验和最终用户都将产生更大的影响。

享受实验吧!

更多React教程及资料,关注我私信回复【教程】即可获取!

想了解更多技术知识欢迎评论区留言或私信我!

欢迎关注公众号:fkdcxy 疯狂的程序员丶 发现更多技术知识!



Tags:React   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: React  点击:(19)  评论:(0)  加入收藏
什么是vuevue是尤雨溪在2014年发布的一个渐进式的js框架,它有着双向绑定的特性,同时它的虚拟dom技术让性能得到大大提升。最重要的就是它是渐进式的应用,你可以在你的项目中逐...【详细内容】
2021-09-22  Tags: React  点击:(78)  评论:(0)  加入收藏
每个前端开发人员都听说过三个用于构建 Web 应用程序的框架:React、Vue.js和Angular。React 是一个 UI 库,Angular 是一个成熟的前端框架,而 Vue.js 是一个渐进式框架。它们几...【详细内容】
2021-08-25  Tags: React  点击:(96)  评论:(0)  加入收藏
领域驱动,各自只管各自的模块,顶层再来进行组装和分配...【详细内容】
2021-06-25  Tags: React  点击:(92)  评论:(0)  加入收藏
public class SReactorSThread { private Selector selector; private ServerSocketChannel serverSocketChannel; private int PORT = 6666; public SReactorS...【详细内容】
2021-05-25  Tags: React  点击:(779)  评论:(0)  加入收藏
为什么要从 Vue 转到 React,这篇文章为什么我们放弃了 Vue?不过对于大多数人来说,用 Vue 还是 React 不是自己说了算,多学一门技术不是坏处,而且 React 被大厂大量使用,要进入大厂...【详细内容】
2021-04-13  Tags: React  点击:(265)  评论:(0)  加入收藏
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式一、Reactor模式 Reactor 释义“反应堆”,是一...【详细内容】
2020-12-24  Tags: React  点击:(205)  评论:(0)  加入收藏
在我回答之前,如果你读这篇文章是为了选择一个“要学习”的框架,不要这样做。还是读读这篇文章吧。如果你想选择一个框架来使用(在一个实际的项目中),你可以继续:)“更好”是...【详细内容】
2020-11-03  Tags: React  点击:(88)  评论:(0)  加入收藏
在这篇文章中,我将分享我对React Hooks的观点,正如这篇文章的标题所暗示的那样,我不是一个忠实的粉丝。让我们来分析一下React官方的文档中描述的放弃类而使用钩子的动机。动...【详细内容】
2020-11-03  Tags: React  点击:(80)  评论:(0)  加入收藏
Netty 怎么切换三种 I/O 模式什么是经典的三种 I/O 模式?生活场景:当我们去饭店吃饭时:&bull; 食堂排队打饭模式:排队在窗口,打好才走;&bull; 点单、等待被叫模式:等待被叫,好了自己...【详细内容】
2020-10-13  Tags: React  点击:(101)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条