React 幕后工作原理

React 是一个用于构建用户界面的流行 JavaScript 库。它具有声明式、高效且灵活的特点。

但是你有没有想过 React 在幕后是如何运作的？让我们从根本上了解一下 React 的运作方式。

React 是一个 JavaScript 库，用于创建并维护 UI 的内存表示。当用户与 React 应用交互时，React 会更新内存表示，并将更改反映在 UI 中。

React 使用虚拟 DOM，它是实际 DOM 的 JavaScript 表示。虚拟 DOM 是一个轻量级树，仅包含渲染 UI 所需的信息。

当用户与 React 应用交互时，React 会更新虚拟 DOM。然后，React 会将虚拟 DOM 与实际 DOM 进行比较。React 会对实际 DOM 进行必要的更改，并将其反映在 UI 中。

虚拟 DOM 是一个 JavaScript 对象。该对象由 React 元素组成。React 元素是 React 应用程序的最小单元。

React 元素是不可变的。这意味着它们无法被更改。一旦 React 元素被创建，就无法被修改。

这就是 React 如此快速的原因。React 只需要更新虚拟 DOM 中更改的元素。React 不需要重新渲染整个 UI。

React 元素也是轻量级的。React 元素只是 JavaScript 对象。它们没有任何额外的开销。

可以使用该React.createElement()方法创建 React 元素。

React.createElement(
  type,
  props,
  children
);

type 参数指定要创建的元素的类型。该类型可以是 HTML 标签、React 组件或函数。

props 参数指定元素的属性。props 是一个键值对的对象。

children 参数指定元素的子元素。子元素可以是 React 元素或字符串。

以下是创建 React 元素的示例：

const element = React.createElement(
  'div',
  { id: 'container' },
  'Hello, world!'
);

上述代码创建了一个类型为 'div' 的 React 元素。该元素的 id 属性为 'container'，其 child 属性为 'Hello, world!'。

React 元素只是 JavaScript 对象。它们可以存储在变量中，并像其他对象一样传递。

React 组件是返回 React 元素的函数或类。

function Welcome(props) {
  return React.createElement(
    'h1',
    null,
    'Hello, ' + props.name + '!'
  );
}

class Welcome extends React.Component {
  render() {
    return React.createElement(
      'h1',
      null,
      'Hello, ' + this.props.name + '!'
    );
  }
}

上面的代码定义了一个 Welcome 组件。该 Welcome 组件返回一个 React 元素。

当创建一个 React 元素时，React 会为该元素分配一个键。该键用于唯一标识该元素。

React 使用 key 来跟踪元素在虚拟 DOM 中的位置。当用户与 React 应用程序交互时，React 会使用 key 在虚拟 DOM 中快速找到发生变化的元素。

React 仅更新虚拟 DOM 中更改的元素，而不需要重新渲染整个 UI。

React 也使用 key 来确定需要更新哪些 DOM 节点。React 使用 key 将虚拟 DOM 节点与实际 DOM 节点进行匹配。

React 使用 diffing 算法来查找已更改的元素。diffing 算法是一种巧妙的方法，可以找出哪个元素发生了更改。

React 通过对 DOM 节点进行更改来更新实际的 DOM，并且仅更新更改的 DOM 节点。

正在寻找一个对 JavaScript 和加密货币感兴趣的优秀社区？加入我们的 Discord 服务器！💙🧪

Discord：https://discord.gg/ZJ8wARrN9Y