什么是 bind-react
bind-react 是一个能够让你将 React 组件绑定（bind）到数据更新的库。它旨在使用简洁的 API，为 React 开发者提供一种轻松地将组件和状态绑定在一起的极简方法，并且适用于所有的 React 应用程序。
在本教程中，我们将会一步一步地了解如何安装、配置和使用 bind-react 库。
准备工作
在开始之前，你需要安装 Node.js 和 npm。如果你还没有安装，你可以在 Node.js 官网 下载安装包。
安装完成后，你可以在命令行中使用以下命令检查是否安装成功：
node -v npm -v
接着我们将会创建一个 React 应用程序，并安装 bind-react 库来开始这个教程。
创建 React 应用程序
首先，我们需要使用 npm 初始化一个空的 React 应用程序。在终端中，转到你喜欢的目录，并运行以下命令：
npx create-react-app my-app cd my-app npm start
等待应用程序启动后，你应该可以在浏览器中看到一个新的 React 应用程序。接下来，我们将会向这个程序中添加 bind-react 库来完成这个教程。
安装 bind-react
要安装 bind-react，只需在终端中运行以下命令：
npm install --save bind-react
安装完成后，我们可以开始配置我们的应用程序来使用 bind-react 库。
配置 bind-react
一旦你安装了 bind-react，接下来，你需要将它导入到你的组件中。假设我们已经创建一个名为 MyComponent 的新组件。我们可以按如下方式导入 bind-react：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--- ---- --- ---- ---
------
--
--
--
------ ------- ------------------现在我们已经将组件绑定到了 bind-react，接下来让我们开始使用它。
使用 bind-react
bind-react 使用一种函数式的方式来让我们完成绑定。在 MyComponent 组件中，我们需要指定需要绑定的数据源（即状态）。可以使用 bind 方法绑定一个名称到一个状态：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - -
----- ------
--
-------- -
------ -
-----
---- --------------- -----
------
--
--
--
------ ------- -----------------
-
----- -------
--
--在这个例子中，我们使用 状态名称: 绑定名称的键 对配置对象进行设置。这种方式可以让我们绑定多个状态。
你可以在组件中绑定任何嵌套的对象和数组，并且可以使用点号来访问对象的深度。
我们可以在 MyComponent 组件中更新绑定的数据源：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - -
----- ------
--
-------- -
------ -
-----
---- --------------- -----
------
--
--
--
------ ------- -----------------
-
----- -------
-
--使用 setState 方法来更新绑定的数据源：
this.setState({
name: 'Jerry'
});你会发现，当你更新数据源时，组件会自动地重新渲染，并且展现出最新的状态值。
示例代码
这里是一个完整的 MyComponent 组件，展示了如何使用 bind-react 进行绑定，并进行一些基本的状态更新。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------
----- ----------- ------- --------------- -
----- - -
----- ------
---- ---
--
----------- - -- -- -
---------------
----- --------
---- -------------- - --
---
--
-------- -
------ -
-----
-------- - --------------- -----
------- - -------------- -----
------- ------------------------------------------
------
--
--
--
------ ------- -----------------
-
----- -------
---- ------
--
--祝你使用 bind-react 一切顺利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005537381e8991b448d0a5a