Core

React 的实现原理

1. 虚拟 DOM (Virtual DOM)

React 使用虚拟 DOM 来提高性能。虚拟 DOM 是一个在内存中的轻量级 JavaScript 对象，它是实际 DOM 的抽象表示。当组件的状态或属性发生变化时，React 会首先在虚拟 DOM 中进行更新。然后，React 会将更新前后的虚拟 DOM 进行比较，找出变化的部分（称为“diffing”）。最后，React 将这些变化应用到实际的 DOM 中。这个过程比直接操作 DOM 更高效，因为直接操作 DOM 是一个昂贵的操作。
React uses Virtual DOM to enhance performance. Virtual DOM is a lightweight JavaScript object in memory, representing the abstraction of the actual DOM. When a component's state or props change, React first updates the Virtual DOM. Then, React compares the previous and updated Virtual DOM to identify changes (a process called "diffing"). Finally, React applies these changes to the actual DOM. This process is more efficient than directly manipulating the DOM, as direct DOM operations are costly.

2. 调和 (Reconciliation)

调和是 React 更新实际 DOM 的过程。React 通过 diff 算法来比较新旧虚拟 DOM，确定哪些部分发生了变化。这个过程发生在组件的渲染阶段之后。React 会只更新那些需要改变的部分，而不是重新渲染整个 DOM 树，从而提高了性能。
Reconciliation is the process React uses to update the actual DOM. React employs a diff algorithm to compare the old and new Virtual DOM to determine which parts have changed. This process occurs after the component's render phase. React only updates the parts that need to change, rather than re-rendering the entire DOM tree, thereby improving performance.

3. 组件化 (Componentization)

React 使用组件来构建用户界面。每个组件都是一个独立的、可重用的模块，负责渲染页面的一部分。组件可以是类组件或函数组件，组件之间可以通过 props 传递数据，通过 state 管理自己的内部状态。组件化的设计使得复杂的 UI 可以被拆分为多个简单的、独立的部分，从而提高了开发效率和代码的可维护性。
React uses components to build the user interface. Each component is an independent, reusable module responsible for rendering a part of the page. Components can be either class components or functional components. Data can be passed between components through props, and a component's internal state is managed using state. Componentization allows complex UIs to be broken down into simpler, independent parts, enhancing development efficiency and code maintainability.

4. 单向数据流 (One-way Data Flow)

React 采用单向数据流的设计理念。数据在组件之间通过 props 由上而下传递，从父组件传递到子组件。子组件无法直接修改从父组件接收到的 props，只能通过回调函数通知父组件进行状态更新。这种设计使得数据流向清晰，容易理解和调试。
React follows the concept of one-way data flow. Data flows from parent to child components through props. Child components cannot directly modify the props they receive from parent components; they can only notify the parent component to update its state via callback functions. This design makes data flow clear, easy to understand, and easier to debug.

5. 声明式编程 (Declarative Programming)

React 推崇声明式编程风格。开发者只需要描述 UI 应该是什么样的，而不需要告诉 React 如何一步步地实现 UI 的更新。React 会根据组件的状态和属性来自动管理 UI 的更新。这种方式使得代码更加直观，易于维护。
React advocates for a declarative programming style. Developers only need to describe what the UI should look like without detailing the step-by-step process of updating the UI. React automatically manages UI updates based on the component's state and props. This approach makes the code more intuitive and easier to maintain.

6. Hooks

React 引入了 Hooks 来增强函数组件的功能，使得函数组件能够使用状态、生命周期方法以及其他 React 特性。常见的 Hooks 包括 useState、useEffect、useContext 等。Hooks 使得代码更简洁，逻辑更易于复用。
React introduced Hooks to enhance the capabilities of functional components, allowing them to use state, lifecycle methods, and other React features. Common Hooks include useState, useEffect, and useContext. Hooks make the code more concise and allow for easier reuse of logic.

7. 合成事件 (Synthetic Event)

React 通过合成事件系统来处理浏览器的原生事件。合成事件是一种跨浏览器的包装器，它对浏览器事件提供了一致的 API，从而避免了浏览器兼容性问题。此外，合成事件会批量更新 DOM，进一步提高了性能。
React uses a synthetic event system to handle native browser events. A synthetic event is a cross-browser wrapper that provides a consistent API for browser events, thus avoiding browser compatibility issues. Additionally, synthetic events batch updates to the DOM, further improving performance.

8. Fiber 架构 (Fiber Architecture)

React Fiber 是 React 16 之后引入的核心算法，用于提升 React 的渲染性能。Fiber 将渲染任务拆分为多个小任务，允许 React 在渲染过程中暂停、终止或重启任务，从而提高了对动画、输入响应等高优先级任务的支持。Fiber 架构使得 React 能够更加灵​⬤