From 61f3ef75111c691b5f92cf87ebd7c5b13ca5dd50 Mon Sep 17 00:00:00 2001 From: luo jiyin Date: Mon, 8 May 2023 11:50:49 +0800 Subject: [PATCH] What new in react 18 (#577) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * save and backup * 第一次完稿 --- chinese/articles/whats-new-in-react-18.md | 150 +++++++++++----------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/chinese/articles/whats-new-in-react-18.md b/chinese/articles/whats-new-in-react-18.md index 8bf1f6070..8c5ed845a 100644 --- a/chinese/articles/whats-new-in-react-18.md +++ b/chinese/articles/whats-new-in-react-18.md @@ -1,55 +1,55 @@ > - 原文地址：[What's New in React 18? Concurrency, Batching, the Transition API and More](https://www.freecodecamp.org/news/whats-new-in-react-18/) > - 原文作者：[Akash Joshi](https://www.freecodecamp.org/news/author/akash/) -> - 译者： +> - 译者：luojiyin > - 校对者： -![What's New in React 18? Concurrency, Batching, the Transition API and More](https://www.freecodecamp.org/news/content/images/size/w2000/2021/07/SUSPENSE-BATCHING-TRANSITION.png) +![React 18 有什么新特性？? 并发、批处理、过渡API等](https://www.freecodecamp.org/news/content/images/size/w2000/2021/07/SUSPENSE-BATCHING-TRANSITION.png) -Hey everyone! In this article, I'm going to show you what's new in the latest of version of React – React 18 – in under 8 minutes. +大家好！在这篇文章中，我将在8分钟内向你展示React的最新版本--React 18。在这篇文章中，我将在8分钟内向你展示React的最新版本--React 18的新内容。 -First, you might be wondering whether the latest set of changes will break anything with your current setup, or whether you will have to learn new completely unrelated concepts. +首先，你可能想知道最新的变化是否会破坏你目前的代码，或者你是否必须学习完全不相关的新概念。 -Well, don't worry – you can continue with your present work or continue learning your current React course as it is, as React 18 doesn't break anything. +好吧，不用担心--你可以继续你现在的工作，或者继续学习你目前的React课程，因为React 18不会破坏任何东西。 -If you want to watch a video to supplement your reading, check it out here: +如果你想看一个视频来补充你的阅读，请在这里查看。 -For those of you who really want to learn what's happening, here's the breakdown. +对于那些真正想了解发生了什么的人，这里有详细的介绍。 -## What is Concurrency in React? +## 什么是React的并发性？ -The major theme for this release is **concurrency**. To start with, let's look at what concurrency is. +这个版本的主要主题是**并发**。首先，让我们看看什么是并发性。 -Concurrency is the ability to execute multiple tasks simultaneously. Taking the example of a standard React app, let's consider that an animation is playing in a component, and at the same time a user is able to click or type in other React components. +并发是指同时执行多个任务的能力。以一个标准的React应用为例，让我们考虑在一个组件中播放一个动画，同时用户能够在其他React组件中点击或输入。 ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f5a65bda-b76b-466f-abe3-3d8fbb232655/firefox_PJSGkv5qWX.png](https://www.freecodecamp.org/news/content/images/2021/07/firefox_juLm49pOIQ.png) -Here, while the user is typing and clicking on buttons, an animation is also rendering there within the context of React. +当用户在打字和点击按钮的时候，在React的上下文中，一个动画也在那里渲染。 -React has to manage all the function calls, hook calls, and event callbacks, several of which can even occur at the same time. If React spends all its time rendering animation frames, the user will feel like the app is "stuck", since it won't react to their inputs. +React必须管理所有的函数调用、Hook调用和事件回调，其中几个甚至可能同时发生。如果React把所有时间都花在渲染动画帧上，用户就会觉得应用程序被 "卡住 "了，因为它不会对他们的输入做出反应。 -Now React, running on a single threaded process, has to combine, reorder and prioritize these events and functions so that it can give users an optimum and performant experience. +现在，在单线程进程上运行的React必须对这些事件和功能进行组合、重新排序和优先处理，以便给用户一个最佳的、高性能的体验。 -To do this, React uses a "dispatcher" internally which is responsible for prioritizing and invoking these callbacks. +为了做到这一点，React在内部使用了一个 "调度器"，负责对这些回调进行优先排序和调用。 -Before React 18, the user had no way to control the invocation order of these functions. But now, React is giving some control of this event loop to the user via the Transition API. +在React 18之前，用户没有办法控制这些函数的调用顺序。但现在，React通过Transition API将这个事件循环的一些控制权交给了用户。 -You can read more about this in this article by Dan Abramov: [An ELI5 of concurrency](https://github.com/reactwg/react-18/discussions/46#discussioncomment-846786). +你可以在Dan Abramov的这篇文章中读到更多关于这方面的内容。: [An ELI5 of concurrency](https://github.com/reactwg/react-18/discussions/46#discussioncomment-846786). -## The Transition API +## 过渡API -The developers of React have exposed a few APIs which allow React users to have some control over concurrency. +React的开发者已经公开了一些API，允许React用户对并发性进行一些控制。 -One of these APIs is `startTransition`, which allows developers to indicate to React which actions may block the thread and cause lag on screen. +其中一个API是 `startTransition`，它允许开发者向React指出哪些动作可能会阻塞线程并导致屏幕上的滞后。 -Typically, these actions are the ones you might have previously used debounce for, like network calls via a search API, or render-heavy processes like searching through an array of 1000 strings. +通常情况下，这些动作是你以前可能使用过的去抖(debounce)，比如通过搜索API的网络调用，或者像搜索1000个字符串的数组这样的重渲染过程。 -Updates wrapped in `startTransition` are marked as non-urgent and are interrupted if more urgent updates like clicks or key presses come in. +被`startTransition`装饰器(wrapped)的更新被标记为非紧急的，如果有更紧急的更新，如点击或按键，则会被打断。 -If a transition gets interrupted by the user (for example, by typing multiple letters into a search field), React will throw out the stale rendering work that wasn’t finished and render only the latest update. +如果一个过渡被用户打断（例如，在搜索字段中输入多个字母），React会扔掉未完成的陈旧的渲染工作，只渲染最新的更新。 -### Transition API example +### 过渡API例子 -To understand this in more detail, let's consider a component with a search field. Let's say it has 2 functions to control the state: +为了更详细地理解这一点，让我们考虑一个带有搜索字段的组件。假设它有两个函数来控制状态: ```jsx // Update input value @@ -59,14 +59,14 @@ setInputValue(input) setSearchQuery(input); ``` -`setInputValue` is responsible for updating the input field, while `setSearchQuery` is responsible for performing search based on the present input value. Now, if these function calls happened synchronously every time the user started typing, either of 2 things would happen: +`setInputValue`负责响应更新输入字段，而`setSearchQuery`负责根据当前输入值进行搜索。现在，如果这些函数调用在用户每次开始输入时都同步发生，就会发生2种情况: -1. Several search calls would be made, which would delay or slow down other network calls. -2. Or, more likely, the search operation would turn out to be very heavy and would lock up the screen on each keystroke. +1. 几个搜索调用将被进行，这将延迟或减慢其他网络调用。 +2. 或者，更有可能的是，搜索操作会变得非常繁重，并且会在每次按键时锁定屏幕。 -One way to solve this problem would've been using debounce, which would space out the network calls or search operations. But, the problem with debounce is that we have to play with and optimize the debounce timer quite frequently. +解决这个问题的一个方法是使用去抖(debounce)，这将使网络调用或搜索操作的时间间隔缩短。但是，去抖的问题是，我们必须经常折腾和优化去抖的计时器。 -So in this case, we can wrap setSearchQuery in `startTransition`, allowing it to handle it as non-urgent and to be delayed as long as the user is typing. +所以在这种情况下，我们可以把 setSearchQuery 包(wrap)在 `startTransition` 中，让它作为非紧急事件处理，只要用户在打字，它就会被延迟。 ```jsx import { startTransition } from 'react'; @@ -81,9 +81,9 @@ startTransition(() => { }); ``` -Transitions let you keep most interactions snappy even if they lead to significant UI changes. They also let you avoid wasting time rendering content that's no longer relevant. +过渡让你保持大多数互动的流畅性，即使它们引起了重大的UI变化。它们还可以让你避免浪费时间来渲染不再相关的内容。 -React also provides a new hook called `useTransition` , so you can show a loader while the transition is pending. This helps in indicating to the user that the app is processing their input and will display the results shortly. +React还提供了一个新的Hook，叫做`useTransition`，所以你可以在过渡期内显示一个加载器。这有助于向用户表明，应用程序正在处理他们的输入，并将很快显示结果。 ```jsx import { useTransition } from'react'; @@ -104,21 +104,21 @@ const callback = () => { {isPending && } ``` -As a rule of thumb, you can use the transition API wherever network calls or render-blocking processes are present. +作为一条经验法则，只要有网络调用或渲染阻塞进程存在，你就可以使用过渡API。 -You can read more about the API in this article, [An explanation of startTransition](https://github.com/reactwg/react-18/discussions/41) by Ricky from the Core React team. +你可以在这篇文章中阅读更多关于API的信息, [对startTransition的解释](https://github.com/reactwg/react-18/discussions/41)，由React核心团队的Ricky负责维护。 -### Demos of the Transition API +### 过渡API的演示 -Use `useTransition` and Suspense in an app: [https://codesandbox.io/s/sad-banach-tcnim?file=/src/App.js:664-676](https://codesandbox.io/s/sad-banach-tcnim?file=/src/App.js:664-676) +在应用程序中使用 "useTransition "和Suspense: [https://codesandbox.io/s/sad-banach-tcnim?file=/src/App.js:664-676](https://codesandbox.io/s/sad-banach-tcnim?file=/src/App.js:664-676) -Demo of `startTransition` with a complex rendering algorithm: [https://react-fractals-git-react-18-swizec.vercel.app/](https://react-fractals-git-react-18-swizec.vercel.app/) +复杂渲染算法下的 "startTransition "演示: [https://react-fractals-git-react-18-swizec.vercel.app/](https://react-fractals-git-react-18-swizec.vercel.app/) -## Batching in React +## 在React中进行批处理 -Next up is batching. Batching is something that the developer generally doesn't have to care about, but it's good to know what's happening behind the scenes. +接下来是批处理。批处理是开发者一般不需要关心的事情，但知道幕后发生的事情是很好的。 -Whenever you are using setState to change a variable inside any function, instead of making a render at each setState, React instead collects all setStates and then executes them together. This is known as batching. +每当你使用`setState`来改变任何函数中的变量时，React不是在每个`setState`上进行渲染，而是收集所有的`setStates`，然后一起执行它们。这就是所谓的批处理。 ```jsx function App() { @@ -140,9 +140,9 @@ function App() { } ``` -This is great for performance because it avoids unnecessary re-renders. It also prevents your component from rendering “half-finished” states where only one state variable was updated, which may cause UI glitches and bugs within your code. +这对性能来说是很好的，因为它避免了不必要的重新渲染。它还可以防止你的组件呈现 `半成品`状态，即只有一个状态变量被更新，这可能导致你的代码中出现UI故障和错误。 -However, React didn't used to be consistent about when it performed batching. This was because React used to only batch updates _during_ browser events (like a click), but here we’re updating the state _after_ the event has already been handled (in a fetch callback): +然而，React过去在执行批处理的时间上并不一致。这是因为React过去只在浏览器事件中（如点击）进行批处理更新，但在这里，我们是在事件`处理后`（在一个获取回调中）更新状态。: ```jsx function App() { @@ -167,38 +167,38 @@ function App() { } ``` -Starting in React 18 with `[createRoot]()`, all state updates will be automatically batched, no matter where they originate from. +在React 18中开始使用 `[createRoot]()`, 所有的状态更新将被自动批处理，无论它们来自哪里。 -This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events. This will result in less rendering work by React, and therefore better performance in applications. +这意味着在超时、promises、本地事件处理程序或任何其他事件中的更新将以与React事件中的更新相同的方式进行批处理。这将导致React的渲染工作减少，从而提高应用程序的性能。 -You can read more about batching here in [An explanation of Batching](https://github.com/reactwg/react-18/discussions/21) by Dan Abramov. +你可以在Dan Abramov的 [批处理的解释](https://github.com/reactwg/react-18/discussions/21)， +阅读更多关于批处理的信息。 +### 批处理演示 -### Demos of batching +在React 18之前: [https://codesandbox.io/s/hopeful-fire-ge4t2?file=/src/App.tsx](https://codesandbox.io/s/hopeful-fire-ge4t2?file=/src/App.tsx) -Before React 18: [https://codesandbox.io/s/hopeful-fire-ge4t2?file=/src/App.tsx](https://codesandbox.io/s/hopeful-fire-ge4t2?file=/src/App.tsx) - -After React 18: [https://codesandbox.io/s/morning-sun-lgz88?file=/src/index.js](https://codesandbox.io/s/morning-sun-lgz88?file=/src/index.js) +在React 18之后: [https://codesandbox.io/s/morning-sun-lgz88?file=/src/index.js](https://codesandbox.io/s/morning-sun-lgz88?file=/src/index.js) ## The Suspense API -React 18 includes a lot of changes to improve React performance in a [Server-Side Rendered](/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/) context. Server-side rendering is a way of rendering the JS data to HTML on the server to save computation on the frontend. This results in a faster initial page load in most cases. +React 18包含了很多变化，以改善React在服务端渲染(SSR)下的性能[Server-Side Rendered](/news/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e/)。 服务器端渲染是一种在服务器上将JS数据渲染成HTML的方式，以节省前端的计算。在大多数情况下，获得更快的初始页面加载。 -React performs Server Side Rendering in 4 sequential steps: +React以4个连续的步骤执行服务器端渲染。 -- On the server, data is fetched for each component. -- On the server, the entire app is rendered to HTML and sent to the client. -- On the client, the JavaScript code for the entire app is fetched. -- On the client, the JavaScript connects React to the server-generated HTML, which is known as Hydration. +- 在服务器上，为每个组件获取数据。 +- 在服务器上，整个应用程序被渲染成HTML并发送给客户端。 +- 在客户端，整个应用程序的JavaScript代码被提取出来 +- 在客户端，JavaScript将React连接到服务器生成的HTML，这就是所谓的Hydration。 -React 18 introduces the `Suspense` API, which allows you to break down your app into **smaller independent units**, which will go through these steps independently and won’t block the rest of the app. As a result, your app’s users will see the content sooner and be able to start interacting with it much faster. +React 18引入了`Suspense`API，它允许你将你的应用程序分解成**小的独立单元**，这些单元将独立完成这些步骤，并且不会阻碍应用程序的其他部分。因此，你的应用程序的用户将更快地看到内容，并能更快地开始与它互动。 -### How does the Suspense API work? +### Suspense API是如何工作的 -#### Streaming HTML +#### 流式HTML -With today’s SSR, rendering HTML and hydration are “all or nothing”. The client has to fetch and hydrate all of the app at once. +在今天的SSR中，渲染HTML和hydration是 "全有或全无"。客户端必须一次性地获取和hydration所有的应用程序。 -But React 18 gives you a new possibility. You can wrap a part of the page with ``. +但是React 18给了你一个新的可能性。你可以用``来包装(wrap)页面的一部分。 ```jsx }> @@ -206,34 +206,34 @@ But React 18 gives you a new possibility. You can wrap a part of the page with ` ``` -By wrapping the component in ``, we tell React that it doesn’t need to wait for comments to start streaming the HTML for the rest of the page. Instead, React will send the placeholder (a spinner) instead. +通过用``包装(warp)组件，我们告诉React，它不需要等待评论来开始为页面的其他部分传输HTML。相反，React将发送占位符（一个旋转器spinner）。 -When the data for the comments is ready on the server, React will send additional HTML into the same stream, as well as a minimal inline `