使用React值轻松管理状态

它发生在我们最好的人身上。我们开始一个新项目的最佳意图是编写干净且可维护的代码。项目快进一两个月，我们已经在 20 个不同的地方实现了相同的布尔切换状态。如果多个开发人员以不同的方式实现相同的状态逻辑，事情就会变得更加偏离轨道。幸运的是，react-values 来拯救世界了！

react-values 是一组可组合的 React 组件，可以使用渲染道具轻松管理组件状态。您可以快速添加单个值的状态管理、切换布尔值、递增/递减数字，甚至管理更复杂的数据结构，如对象！

react-values 项目的目标之一是遵循 React 和 JavaScript 中熟悉的约定。一个很好的例子是 ArrayValue 组件，它提供了 push 和 pop 等方法。

您也不限于单一范围内的状态管理，通过 react-values 连接的组件，您可以创建一个可以在组件内部甚至整个应用程序中多次使用的值。

您是否有更喜欢使用受控组件而不是不受控组件的场景？只需将 react-values 组件传递给 value 或 defaultValue 即可。

入门

准备好开始玩 react-values 了吗？

伟大的！我们将通过 npm 安装 react-values 依赖项开始：

$ npm install --save react-values

或通过 yarn：

$ yarn add react-values

然后在您想要使用它的代码中包含 react-values ：

import ReactValues from "react-values";

或者，如果您不需要所有内容，则可以导入各个值：

import { BooleanValue } from "react-values";

基本状态管理

当谈到组件中的状态管理时，我知道有两件事我已经亲自实施了至少一百次左右。第一个是存储用户输入的字符串。

react-values 带有一个 StringValue 组件，它消除了在状态中存储字符串所需的所有必要样板（设置初始状态，编写更改处理程序等）：

<StringValue>
  {({ value, set }) => (
    <input type="text" onChange={e => set(e.target.value)} />
  )}
</StringValue>

另一个主要问题是布尔切换。无论您使用简单的复选框还是花哨的滑块，基础往往都是相同的；建立初始状态，然后编写一个更改处理程序。

与 StringValue 类似，我们可以使用 BooleanValue 来做一些事情：

<BooleanValue>
  {({ value, toggle }) => (
    <input type="checkbox" onClick={toggle} checked={value} />
  )}
</BooleanValue>

观察状态变化

如果您只需要跟踪组件本身的状态，前面的示例非常好，但是如果我们需要知道状态何时发生变化和/或将其发送回服务器进行存储怎么办？

在这些情况下，我们可以简单地在我们的 react-values 组件上包含一个 onChange 属性（它们都支持这一点），我们可以按照我们认为合适的方式处理状态更改：

<StringValue onChange={v => console.log(v)}>
  {({ value, set }) => (
    <input type="text" onChange={e => set(e.target.value)} />
  )}
</StringValue>

在此示例中，我将新值记录到控制台，但您可以轻松地将其替换为 AJAX 调用或其他逻辑以满足您的需求。

多次使用状态值

我之前提到过，有时您需要在代码的不同位置多次使用状态值。这些场景通常会导致在混合中引入更重的权重语句管理库，例如 React Redux。

如果您曾经使用过 react-redux，您就会知道有时它太过分了，并且它可能会引入您可能想要避免的新的复杂层。如果是这种情况，您可以使用 react-values 连接值来创建一个组件，当您想要保持状态同步时可以重用：

import { createBooleanValue } from "react-values";

const ConnectedBooleanValue = createBooleanValue();

// ...

这个新的 ConnectedBooleanValue 可以像 BooleanValue 的实例一样使用和重复使用，允许您在应用程序的任何位置共享此状态。

与 onChange 处理程序类似，react-values 中的每个值类型都有一个等效的 create 方法。

结论

我希望您发现这篇关于 react-value 的帖子内容丰富，并且您未来的编码冒险包括的状态管理样板逻辑要少得多。

如果您想查看本文中的示例，您可以在 CodeSandbox 上查看它们。

享受！ 💥