简介
Throne 是一个用于创建用户界面和管理应用状态的 JavaScript 库。其核心思想是将应用状态保存在单一的源头，并在整个应用程序中共享。
在本文中，我们将介绍如何使用 Throne 来创建一个简单的前端页面，同时演示库的几个主要特性。
安装
在开始使用 Throne 之前，我们需要在我们的项目中安装它。我们可以使用 npm 包管理器来安装 Throne。
--- ------- ------ ------
上述命令会将 Throne 安装为我们项目的一个依赖项。
示例
让我们使用一个简单的示例来演示 Throne 的主要特性。我们将创建一个示例应用程序，该应用程序将包括一个 "Hello, Throne!" 的文本块以及一个可以通过点击按钮而更改的计数器。
初始化 Throne 应用程序
首先，我们需要导入 Throne 库并初始化我们的应用程序。
------ - ------------ -------- - ---- ---------
-- ----------------------
----- ------------ - -
------ --
--
-- -- ------ ----
----- ----- - --------------------------
-- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们首先定义了一个初始状态对象，其中包含一个名为 count 的计数器属性，它被设置为 0。
然后，我们通过 createStore 函数来创建我们的 Throne 应用程序的实例，并使用 Provider 组件将该实例注入到根组件中。Provider 组件使我们能够将应用程序状态注入到所有的子组件中。
在这个示例中，我们仅仅渲染了一个名为 App 的组件。
创建文本块组件
现在，我们需要来创建一个能够显示 "Hello, Throne!" 文本块的组件。
------ - ----------- - ---- ---------
-------- ----------- -
----- ------- - ------- ---------
-- --------------
----- ----- - ------------------- -- -------------
------ -
-----
----------------
--------- -----------
------
--
-在上述代码中，我们定义了一个名为 TextBlock 的组件，该组件将根据应用程序状态中的 count 属性来显示计数器的值。
使用 useSelector Hook，我们可以从应用程序状态中选择出需要的值，并在组件中使用。
创建计数器组件
现在我们来创建一个计数器组件，以便将计数器值更改为应用程序状态中的新值。我们将使用 useDispatch Hook 来发送一个更改状态的操作。
------ - ----------- - ---- ---------
-------- --------- -
-- -- -------- --
----- -------- - --------------
----- --------- - -- -- -
---------- ----- ----------- ---
--
------ ------- ------------------------- -------------
-在上述代码中，我们定义了一个名为 Counter 的组件，并在该组件中导入 useDispatch Hook。我们使用 useDispatch 来获取一个 dispatch 函数，该函数将用于发送状态更改操作。
在这个示例中，我们定义了一个名为 increment 的函数，该函数将使用 dispatch 函数来递增计数器的值。
最后，我们在该组件的返回函数中返回了一个能够触发 increment 函数的按钮。
呈现组件
最后一步是将之前定义的两个组件组合在一起，并呈现为一个完整的界面。
-------- ----- -
------ -
-----
---------- --
-------- --
------
--
-在上述代码中，我们定义了一个名为 App 的组件，并在该组件中呈现了之前定义的两个组件。
现在，我们可以在浏览器中查看我们的应用程序，并通过点击按钮更改计数器的值。
总结
Throne 是一个非常有用的 JavaScript 库，它为开发人员提供了一种轻松地管理应用程序状态的方式。在本教程中，我们了解了我们如何使用一些关键的 Throne 功能（如 createStore、Provider、useSelector 和 useDispatch）来创建一个简单的应用程序。现在我们可以利用这些知识来构建更加高级的应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055e6081e8991b448dbc5c