我们开始一个新的项目,以最好的意图写清洁和可维护的代码。快速推进一个月或两个项目,我们已经在二十个不同的地方实现了相同的布尔式转换状态。
「react-values」是一组可复制的 React 组件,可以轻松地管理组件状态,可以快速为单个值添加状态管理,转换 Boolean,增量/减量数字,甚至可以像对象一样管理更复杂的数据结构!
响应值项目的目标之一是遵循熟悉的惯例,无论是在React还是JavaScript中,一个很好的例子是ArrayValue组件,该组件提供推和pop等方法。
您也不局限于单个范围的状态管理,通过响应值连接的组件,您可以创建可在组件内部或甚至在应用程序中多次使用的值。
您是否有一个场景,您宁愿使用一个受控制的组件而不是一个未受控制的组件? 只需将您的反应值组件传输为值或默认值,您可以去。
开始的
准备好开始玩反响价值了吗?
我们将通过npm来安装反应值依赖:
1$ npm install --save react-values
或通过YARN:
1$ yarn add react-values
然后在您的代码中包含响应值,您希望使用它:
1import ReactValues from "react-values";
或者,如果你不需要全部,你可以导入个别值:
1import { BooleanValue } from "react-values";
基本国家管理
当涉及到组件中的状态管理时,我知道我个人已经实施了至少一百次,第一种是由用户输入的字符串的存储。
react-values 配备了 StringValue 组件,可以消除所有必要的锅炉板(设置初始状态、编写变更处理器等)以便在状态中存储字符串:
1<StringValue>
2 {({ value, set }) => (
3 <input type="text" onChange={e => set(e.target.value)} />
4 )}
5</StringValue>
另一个主要的罪犯将是布尔的转移. 无论你是用一个简单的检查框,还是一个漂亮的滑动器,基础往往是相同的;建立起始状态,然后写一个更改处理器。
类似于StringValue,我们可以使用BooleanValue来做菜:
1<BooleanValue>
2 {({ value, toggle }) => (
3 <input type="checkbox" onClick={toggle} checked={value} />
4 )}
5</BooleanValue>
观察国家变化
如果您只需要跟踪组件本身的状态,前面的示例非常好,但如果我们需要知道该状态何时发生变化,并/或将其发送回服务器进行存储,怎么办?
在这些场景中,我们可以简单地在我们的反应值组件中包含一个onChange属性(它们都支持这一点),我们可以按照我们认为合适的方式处理状态变化:
1<StringValue onChange={v => console.log(v)}>
2 {({ value, set }) => (
3 <input type="text" onChange={e => set(e.target.value)} />
4 )}
5</StringValue>
在本示例中,我将新值登录到控制台,但您可以轻松地用AJAX调用或其他逻辑来满足您的需求。
使用国家价值多次
我之前提到,有时你需要在代码中的不同地方多次使用状态值,这些情况通常会导致在混合中引入更重的重量陈述管理库,例如 React Redux。
如果您曾经使用过react-redux,您知道有时它只是太多了,并且它可以引入一个新的复杂度层,您可能希望避免。
1import { createBooleanValue } from "react-values";
2
3const ConnectedBooleanValue = createBooleanValue();
4
5// ...
这个新的ConnectedBooleanValue可以像是BooleanValue的实例一样使用和重复使用,允许您在应用程序中的任何地方共享此状态。
与onChange处理器类似,在react-values中的每个值类型都有一个等同的创建方法。
结论
我希望你发现这篇关于反应值的文章有信息,并且你的未来编码冒险包括更少的状态管理锅炉板逻辑。
如果你想看到本文中的示例在行动中,你可以检查它们在 CodeSandbox上。
享受吧!哈哈