开源日报每天推荐一个 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/