開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年2月6日，開源日報第1097期：
今日推薦開源項目：《mern-chat-app》
今日推薦英文原文：《How does react fiber work?》

開源項目

今日推薦開源項目：《mern-chat-app》傳送門：項目鏈接

推薦理由： 實時聊天應用 | MERN && Socket.io && JWT
一些 feature:
🌟 技術棧：MERN + Socket.io + TailwindCSS + Daisy UI
🎃 使用JWT進行身份驗證和授權
👾 使用Socket.io實現實時消息傳遞
等等
🔗 詳細教程：https://www.youtube.com/watch?v=HwCqsOis894

英文原文

今日推薦英文原文：How does react fiber work?

推薦理由：React Fiber是React 16引入的核心演算法重新實現，旨在提升應用性能與響應速度，它將渲染過程分解為可中斷、增量式的單位，使得React能更靈活高效地處理大型複雜組件樹

How does react fiber work?

React Fiber is an internal reimplementation of the core algorithm in React, introduced in React 16, designed to improve the performance and responsiveness of React applications. It』s a complete rewrite of the reconciliation and rendering process, allowing React to work in a more incremental and interruptible way, which makes it better at handling large and complex component trees.

To understand React Fiber better, let』s first explain how the traditional reconciliation process works, and then I』ll provide a simplified example to demonstrate the concept

Traditional Reconciliation:

In the traditional (pre-Fiber) React rendering process, when you update the state or props of a component.

React follows these steps

  1. Reconciliation: React constructs a virtual representation of the updated component tree.
  2. Diffing: It compares the new virtual tree with the previous one to determine what changed.
  3. Update: React applies the changes to the actual DOM.

This process happens in a single batch, which can be problematic for performance because it might cause delays in rendering and make animations less smooth.

React Fiber

React Fiber breaks down the rendering process into smaller, more manageable units, which can be paused, resumed, and prioritized. It allows React to be more flexible and efficient in its rendering.

Here』s a simplified example to illustrate how React Fiber works:

Suppose you have a React component that renders a list of items, and you want to update one of the items. In the traditional approach, React might need to re-render the entire list. However, with React Fiber, it can be more granular.

  1. Reconciliation: When an update occurs, React starts the reconciliation process but doesn』t necessarily complete it in one go.
  2. Priority Reconciliation: React assigns different priorities to different parts of the component tree. For example, updating a visible part of the screen (e.g., an item near the top) is given a higher priority than updating items off-screen.
  3. Yielding: React can pause and yield control back to the browser to ensure that high-priority user interactions remain responsive.
  4. Partial Update: React can then apply the changes in a more granular way. It may update just the item that changed without re-rendering the entire list.

In this way, React Fiber makes React applications more responsive, and it can better handle complex user interfaces.

Please note that the above example is a simplified representation of how React Fiber makes rendering more efficient and responsive by breaking it down into smaller units and prioritizing updates.

The inner workings of Fiber involve a lot of internal bookkeeping and scheduling logic to achieve these benefits.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/