開源日報每天推薦一個 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/
