search

SyMind / learning

路漫漫其修远兮，吾将上下而求索。
10 stars 1 forks source link

React 是创建声明式 UI 框架的 LLVM #19

Open SyMind opened 3 years ago

SyMind commented 3 years ago

原文：https://agent-hunt.medium.com/react-is-also-the-llvm-for-creating-declarative-ui-frameworks-767e75ce1d6a

『LLVM 项目是一个模块化的、可重用的编译器和工具链技术的集合。』LLVM 使创建编程语言变得容易。

当我们初次遇到 React 时，它是作为一个用于构建用户界面的 JavaScript 库被引入的。当你深入研究其内部原理后，React 也可以被称为创建声明式 UI 框架的 LLVM。它使得创建自己的声明式 UI 框架变得容易。

如果您问为什么要构建声明式 UI，那是因为声明式代码更容易编写、阅读、管理和调试或几乎不调试。手动管理 UI 的更新很麻烦而且容易出错，而像 React 这样的工具在这方面做得更好。

React 最初是面向 Web 应用的。很快我们便发现这些理念不仅适用于 Web 应用，还适用于 iOS 和 Android。我们可以使用相同的组件声明方式为所有这些不同的平台构建 UI。

image

React 中有3个基本块。

  1. React Component API：提供组件 API 和生命周期
  2. React-Reconciler：它是核心 diff 算法，管理声明式 UI 背后的命令式更新。Reconciler 找出应用程序 UI 在不同状态之间的变化并在幕后应用这些变化
  3. React Renderer：渲染器不过是实现了一些 react-reconciler 所需要的函数。react-reconciler 将根据需要调用这些函数，以对最终目标更新变化。如果使用 DOM API 实现这些函数，则目标是 Web 应用。如果你使用 iOS UI Kit API 实现这些函数，目标是 iOS。如果使用 Android UI API 实现这些函数，则目标是 Android。事实上，任何支持绘图的系统都可以作为 React 的渲染目标。

image

react-reconciler 在 React 16 版本中被完全重写，使用了一个更好的实现 React Fiber。在 React Fiber 之前，Reconciler 是紧密耦合的。现在它已经解耦，并且更容易编写自定义渲染器。