npm 包 react-reconciler 使用教程

React 是一个非常流行的前端框架，它提供了一种声明式的编程方式来构建用户界面。但是，React 的工作原理并不容易理解，更不用说从底层实现一个类似 React 的框架了。

幸运的是，Facebook 开源了一个 npm 包叫做 react-reconciler，它提供了一些底层的构建块来实现自己的 React-likes 框架。在本篇文章中，我们将会了解 react-reconciler 的使用教程，深入探讨其原理，并提供一些示例代码。

什么是 React 协调器？

在了解 react-reconciler 之前，我们需要先了解 React 的协调器（也称为调和器）。React 协调器是 React 的核心算法，用于将应用程序状态映射到视图层级。在 React 库中，我们通常使用 ReactDOM 在 Web 上渲染界面。ReactDOM 实现了针对 Web 平台的协调器，它负责将 React 元素（Element）转换为 DOM 元素。

但是，React 还可以使用同样的编程模型来构建其他类型的 UI，例如移动应用程序、三维游戏、VR 和 AR 应用程序等。为了支持这些场景，React 团队提供了一个通用的协调器接口，即 react-reconciler。这个接口包含了一些基础算法和钩子，您可以实现自己的协调器，并在特定的平台上运行。

如何使用 react-reconciler？

我们来看一个基础的例子，如何使用 react-reconciler 构建一个简单的文本组件。

首先，我们需要安装 react-reconciler：

--- ------- ----------------

然后，我们创建自己的协调器。在这个例子中，我们称之为 MyRenderer：

------ - ---------- - ---- -------------------

----- ---------- - ------------
  -- ---- ------ --------------
---

接下来，我们定义我们的组件，这个例子只是一个简单的文本组件：

----- ------------- - -
  ----- -------
  ------ -----
--

最后，在我们自定义的实现中，我们需要为 MyRenderer 添加一些方法，例如 createInstance、appendChild 等等。可以想象一下，这些方法称为 Reconciler Host Config，它们提供了外部环境和自定义的核心实现间的桥梁。

----- ---------- - ------------
  -- --- --
  ---------------
    -----
    ------
    ----------------------
    ------------
    ----------------------
  - -
    -- ----- --- ------- -
      ------ ----------------------------
    -
    ----- --- ------------------ --------- ----- - - ------
  --

  -------------------
    -----
    ----------------------
    ------------
    ----------------------
  - -
    ------ ------------------------------
  --

  --------------------------- ------ -
    ----------------------------------
  --

  ------------------------- -
    ------ ------
  --

  ------------------ -
    ------ -----
  --

  ------------------ -
    ------ -----
  --
  -- --- --
---

现在，我们可以使用 react-reconciler 渲染我们的组件了：

----- ---- - ----------------------------------------------------------- -------
----- -------- - -----------------------------------------
---------------------------- ----------
---------------------------------- -------- ----- ------

完成了这个例子，我们现在可以更深入地探讨一下 react-reconciler 的 API 和原理了。

React Reconciler API

Reconciler(options)

Reconciler 函数是我们构建自己的协调器的入口点。它接受一个 options 对象，它的属性列表如下：

  • createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle): 这个方法创建一个新的实例，表示特定类型的组件或原生控件。在浏览器中，这意味着创建一个 DOM 元素。React 使用这个方法跟踪组件结构，维护组件之间的关系，等等。

  • createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle): 这个方法创建一个新的文本节点实例，用于表示 DOM 中的文本。React 将所有文本视为特殊类型的组件，因此如果您在组件中使用文本，React 将会调用这个方法来创建文本节点。

  • appendChild(parentInstance, child): 这个方法添加一个子元素到父元素中。在 React 中，这个方法表示将子元素添加到父元素的 children 属性中。

  • removeChild(parentInstance, child): 这个方法删除子元素从父元素中。React 使用这个方法来管理协调器内部的组件结构，以确保正确的协调和更新。

  • insertBefore(parentInstance, child, beforeChild): 这个方法将一个子元素插入到另一个子元素的前面。在 React 中，这通常在兄弟组件之间移动元素时使用。

  • finalizeInitialChildren(parentInstance, type, props, rootContainerInstance, hostContext): 这个方法获取一个组件的 props，并在组件被创建后调用。我们可以在这里修改初始化后的属性数据。例如，如果我们要为新组件设置默认值，则可以在这个方法中查找和确认所需的值。

  • prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext): 当组件更新时，React 会调用此方法，该方法允许我们比较 props 和以前的 props，并确定是否需要更新。如果我们确定组件不需要更新，则返回 null。

  • commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle): 当组件需要更新时，React 将会调用此方法来执行真实的更新。在这里，我们可以使用之前计算出的更新内容，将其反映到真实的 DOM 上，或者在自定义的目标平台上反映更新。

  • prepareForCommit(containerInfo): 在 React 开始更新组件之前，我们可以在此方法中执行一些准备工作。例如，如果我们需要向自定义平台发送异步任务，则可以在这里处理并等待任务完成。

  • resetAfterCommit(containerInfo): 当 React 完成更新并已经成功渲染了 DOM（或自定义平台）时，此方法将会被调用。我们可以在这里进行一些在更新后运行的任务（例如动画等）。

Reconciler.createContainer(containerInfo[, isConcurrent[, hydrate]])

createContainer 方法创建一个新的协调器根节点。协调器节点对应了应用程序中的一个根 DOM 节点（或自定义平台等其他环境）。

  • containerInfo: 一个容器信息对象，该对象包含与 an 的 container 相关的特定信息。在 Web 上，这个就是一个 DOM 节点。

  • isConcurrent: 切换到 Concurrent 模式。

  • hydrate: 执行 Hydrate 模式。

Reconciler.updateContainer()

updateContainer 方法触发协调器更新。它类似于 ReactDOM.render 方法，但是它允许我们在多个时刻更新组件（例如，当应用程序状态改变时）。

示例代码

下面是一个完整的例子，其中我们将使用 react-reconciler 实现自己的协调器和组件。这个例子中，我们将在一个 WebGL 视口上绘制一个简单的方块。

------ - ---------- - ---- -------------------

----- ---------- - ------------
  -- ------
  ------------------------------ ------------- -
    ----- -- - -----------------

    -- ----- ---
    ------ -
      --- ---
      -------- --------------
        ---
        -
          ---- ------ -
            ----------- - --------- ---- ---- -----
            ------------ - ------
          -
        --
        -
          ---- ------ -
            ------------ - --------- ---- ---- -----
          -
        -
      --
      --------------- ---------------- --- ---------------- -----
    --
  --

  -- ----
  -------------------- ------ ---------------------- ------------ ----------------------- -
    ----- -- - -------------------------

    -- ----- --- --------- -
      ------ -
        ----- -----
        ------ ----------- -- --- -- ---
        -------- ------------------------------
        --------------- -------------------------------------
      --
    -

    ----- --- ------------------ --------- ---- ----------
  --

  -- ----
  ----------------------- ----- --------- --------- ---------------------- ------------ -
    ------ ---------
  --

  -- ------
  ---------------------- -------------- ----- --------- --------- ----------------------- -
    -- ----- --- --------- -
      -------------- - -------------- -- --- -- ---
    -
  --

  -- -----
  --------------------------- ------ ---

  -- ---------
  --------------------------- ------ ---

  -- ------
  ------------------------ ---------------------- ------------ ----------------------- ---

  -- -----
  ------------------------- -
    ------ ------
  --

  -- ----
  ------------------ ---

  -- ----
  ------------------ ---

  -- ----
  -- -----------
  --------------------------- -
    ------ ------
  --

  -- ----------
  ---- ------ ----------- --- -------- - -- -- ----------------- - -- -- -----------
  ----------------- -----
  -------------------- ------
  ------------------ ------
---

-- -- ----- ---
----- ------ - ---------------------------------
----- -- - ---------------------------

-- -- ---------- ---
----- ---- - ----------------------------
  --- ---
---

-- -- ------ --
----- ------ - ---------------------------
  ----- ---------
  ------ --- -- ---
---

-- -- ------ -------
---------------------------- --------

-- -- ---------- ---
------------------------------ ----- ----- ------

-------- ----------------- --------- --------- -
  ----- -- - ----------------------------------
  ------------------- ----------
  ---------------------

  ----- -- - ------------------------------------
  ------------------- ----------
  ---------------------

  ----- ------- - -------------------
  ------------------------ ----
  ------------------------ ----
  ------------------------

  -- --------------------------------- ---------------- -
    ----- ------------- -----------------------------------
  -

  ------ --------
-

-------- ---------------- ----- -
  ----- ------ - ------------------
  ------------------------------ --------
  ------------------------------ ----- ----------------
  ------ -------
-

这些代码将在 WebGL 上绘制一个简单的方块。这只是一个开始，并不算完整的实现，但它向您展示了如何使用 react-reconciler 实现自己的协调器，以及如何在自定义平台上渲染组件。

结论

React-reconciler 是 React 之外最为核心的一部分，它是在 React 基础上做自定义渲染、组件化UI以及Flash/flex等跨平台方向的催生器，这样在任何需要构建基于React编写的可视化程序的场景下都可以使用React即免于反复深入底层实现。在我们的实践中，我们可以使用 react-reconciler 创建自己的协调器。我们使用 MyRenderer 来实现绘制 WebGL 图形的协调器，来解释 react-reconciler 并提供了示例的深度文章。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/115274

阅读全文

猜你喜欢

  • npm 包 maker-ui 使用教程

    前言 随着前端技术的不断发展，不少框架和工具库层出不穷。其中，npm 是前端开发过程中必不可少的一个工具，而 maker-ui 则是 npm 包中的一款前端 UI 库。

    5 年前
  • npm 包 hyperagent 使用教程

    在前端领域，使用 hypermedia API 来构建 Web 应用程序已经成为一种常见的方式。hyperagent 是一个可以帮助开发人员更轻松地使用 hypermedia API 的 npm 包。

    5 年前
  • npm 包 superagent-defaults 使用教程

    在前端开发中，我们常常需要进行网络请求。其中superagent是一个常用的网络请求库，而superagent-defaults则是superagent的一个默认参数配置插件。

    5 年前
  • npm 包 links-parser 使用教程

    前言 在前端开发中，经常需要获取一个网页中的所有链接。手动解析 HTML 是一个繁琐的过程，会消耗大量的时间和精力。而 links-parser 就是一个非常好用的工具来帮助我们实现这个功能。

    5 年前
  • npm 包 reject 使用教程

    在前端开发过程中，我们经常使用 npm 包来扩展项目的功能。然而，在使用 npm 包的过程中，有时候会遇到一些问题，比如包的版本不兼容或者无法正常使用等。在这种情况下，我们可能需要使用 npm 包的 ...

    5 年前
  • npm 包 npmrc 使用教程

    在前端开发过程中，我们经常会用到 npm 包管理器来下载和安装各种基础库和第三方依赖。但是在实际开发过程中，我们会经常遇到需要配置多个不同的 npm 仓库地址的情况，例如： 需要使用公司内部搭建的 ...

    5 年前
  • npm 包 @k4connect/engine.io-client 使用教程

    背景 @k4connect/engine.io-client 是一个基于 engine.io 协议的实现，它提供了一个简单的 API 用于与 server 进行双向通信。

    5 年前
  • npm 包 @jonny/engine.io-client 使用教程

    @jonny/engine.io-client 是一个用于浏览器和 Node.js 的 engine.io 客户端。它支持 WebSocket 和 XHR 传输及其协议协商。

    5 年前
  • npm 包 minispy 使用教程

    1. 简介 minispy 是一个小巧灵活的 JavaScript 监控工具库，通过在页面中添加代码片段，可以有效的跟踪用户行为、监测响应性能、埋点打点等。 2. 安装 将 minispy 安装到你的...

    5 年前
  • 使用 component-collection npm 包

    在前端开发中，构建可重用的组件是非常重要的一件事情。npm 包 component-collection 可以帮助你构建自己的组件库。在本文中，我们将介绍如何使用该 npm 包，并提供一个示例代码。

    5 年前
  • npm 包 code42day-clock 使用教程

    什么是 code42day-clock？ code42day-clock 是一个用于 JavaScript 的 npm 包，它提供了一种简单易用的方式来处理时间和日期。

    5 年前
  • NPM 包 disposable 使用教程

    NPM 是 JavaScript 世界中最大的包管理器，提供了许多用于前端开发的有用工具和库。其中一个非常有用的包就是 disposable，它可以让您快速创建临时文件和目录。

    5 年前
  • npm 包 Paperclip 使用教程

    Paperclip 是一个强大的前端模板引擎，它可以让你更方便地管理和切换不同的模板。在开发过程中，我们常常需要使用到各种不同的模板，而 Paperclip 正好可以帮助我们更好地管理和使用这些模板。

    5 年前
  • npm 包 mojo-views 使用教程

    什么是 mojo-views mojo-views 是一个轻量级的前端 MVVM 框架，它提供了类似于 Vue.js 和 React.js 的组件化思想。通过创建视图、绑定数据和事件，可以快速构建复杂...

    5 年前
  • npm 包 mojo-router 使用教程

    前言 在现代Web应用中，前端路由是必不可少的一部分，它帮助我们实现单页应用（SPA）和客户端路由。我今天要向大家介绍一个npm包，它是一个轻量级、快速的客户端路由库，叫做 Mojo Router。

    5 年前
  • npm 包 mojo-paperclip 使用教程

    npm 包 mojo-paperclip 使用教程 在前端开发中，我们经常会使用到图片上传功能。考虑到用户体验及流量消耗等方面的问题，我们会将图片压缩之后再上传。而 mojo-paperclip 就是...

    5 年前
  • npm 包 mojo-models 使用教程

    前言 基于 Node.js 平台的前端开发工具包越来越多，npm 成为前端开发者必不可少的工具之一。其中，mojo-models 是一款非常优秀的 npm 包，它可以帮助开发者轻松搭建可扩展的数据模块...

    5 年前
  • npm 包 mojo-bootstrap 使用教程

    在前端开发中，Bootstrap 是一个备受欢迎的 CSS 框架，它提供了一套开箱即用的样式和组件，让开发者能够快速构建漂亮的网页界面。但是，每一个项目都需要重复地引入相同的 Bootstrap 样式...

    5 年前
  • npm 包 inject 使用教程

    在前端开发中，我们经常需要将一个函数或者变量注入到另外一个模块中使用。这个时候我们可以使用 inject 这个 npm 包。本文将详细介绍如何使用该 npm 包实现注入功能，以及一些常见使用场景和实例...

    5 年前
  • npm 包 Linen 使用教程

    什么是 Linen？ Linen 是一款基于 JavaScript 的标记语言，它能够将 Markdown、LaTeX 和 HTML 相结合，生成具美感、且易于协作的文档。

    5 年前

相关推荐

    暂无文章