开源日报每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。
2023年12月16日，开源日报第1045期：
今日推荐开源项目：《react-spectrum》
今日推荐英文原文：《React 18 new features》
开源项目
今日推荐开源项目：《react-spectrum》传送门：项目链接
构建自适应、可访问和强大的用户体验的库和工具的集合, Adobe设计系统 Spectrum 的React实现
英文原文
今日推荐英文原文：React 18 new features
简单介绍 react 18 new features 概念，了解详细可查官网 React
React 18 new features
React 18 is more focused on making the UI more performant by introducing out-of-the-box features and improvements powered by concurrent rendering.
● Automatic Batching
Batching is when React groups multiple state updates into a single re-render for better performance.
For example, if you have two state updates inside of the same click event, React has always batched these into one re-render. If you run the following code, you’ll see that every time you click, React only performs a single render although you set the state twice:
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 bugs. This might remind you of how a restaurant waiter doesn’t run to the kitchen when you choose the first dish but waits for you to finish your order.
To read more about this click here.
● Transitions
A transition is a new concept in React to distinguish between urgent and non-urgent updates.
● Urgent updates reflect direct interaction, like typing, clicking, pressing, and so on.
● Transition updates transition the UI from one view to another.
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in.
If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
● useTransition: a hook to start transitions, including a value to track the pending state.
● startTransition: a method to start transitions when the hook cannot be used.
Transitions will opt-in to concurrent rendering, which allows the update to be interrupted. If the content re-suspends, transitions also tell React to continue showing the current content while rendering the transition content in the background (see the Suspense RFC for more info).
New Suspense Features
Suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed:
There is added support for Suspense on the server and expanded its capabilities using concurrent rendering features. For more, see the RFC for Suspense in React 18.
New Client and Server Rendering APIs
● React DOM Client: These new APIs are now exported from react-dom/client:
○ createRoot: New method to create a root to render or unmount. Use it instead of ReactDOM.render. New features in React 18 don’t work without it.
○ hydrateRoot: New method to hydrate a server-rendered application. Use it instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs. New features in React 18 don’t work without it.
Both createRoot and hydrateRoot accept a new option called onRecoverableError in case you want to be notified when React recovers from errors during rendering or hydration for logging. By default, React will use reportError, or console.error in the older browsers.
See docs for React DOM Client here.
● React DOM Server: These new APIs are now exported from react-dom/server and have full support for streaming Suspense on the server:
○ renderToPipeableStream: for streaming in Node environments.
○ renderToReadableStream: for modern edge runtime environments, such as Deno and Cloudflare workers.
The existing renderToString method keeps working but is discouraged.
See docs for React DOM Server here.
New Strict Mode Behaviours
In the future, this will allow React to add and remove sections of the UI while preserving the state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.
This feature will give React apps better performance out-of-the-box but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.
To help surface these issues, React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.
下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/
