如果你试图快速原型应用程序,你要做的最后一件事是不断地执行相同的状态管理逻辑. 添加一些像 Redux可以帮助,但往往只会添加一个复杂层,可以使你更慢。
React PowerPlug 是提供不同类型的状态管理场景的无渲染组件组合,通过渲染副本。
作为一个警告词,该项目的主分支仍然被认为是不稳定的,正在积极开发中. 我选择谈论不稳定的版本,因为它在不同类型的状态组件方面有这么多可提供。
开始的
要开始,我们需要在我们的项目中添加React PowerPlug:
通过NPM
1$ npm install --save react-powerplug
或通过 Yarn
1$ yarn add react-powerplug
随着对我们的项目增加的依赖性,我们需要将React PowerPlug全部导入:
1import ReactPowerPlug from "react-powerplug";
或者导入我们想要使用的个别组件:
1import { Counter, Hover, Togggle } from "react-powerplug";
例子
如前所述,这个项目的主分支拥有大量额外的国家元件。
虽然数据类型可能在组件之间有所不同,但几乎所有组件都接受一个初始属性来设置默认状态。
国家管理
一个组件的状态可以以许多不同的形式出现,它可以像持有单个值一样简单,或者像布尔值、计数和字符串值的混合袋一样复杂。
国家
状态是更基本的组件之一. 非常类似于React在状态中煮熟的属性,状态允许您维护一个可以通过SetState更新的状态属性对象:
1<State initial={{ favorite: "", picked: "" }}>
2 {({ state, setState }) => (
3 <div>
4 <button
5 onClick={() =>
6 setState({
7 favorite: "Alligator",
8 picked: new Date().toLocaleTimeString()
9 })
10 }
11 >
12 Alligator
13 </button>
14 <button
15 onClick={() =>
16 setState({
17 favorite: "Crocodile",
18 picked: new Date().toLocaleTimeString()
19 })
20 }
21 >
22 Crocodile
23 </button>
24 <button onClick={() => setState({ favorite: "", picked: "" })}>
25 Reset
26 </button>
27 {state.favorite && state.picked && (
28 <div>
29 <br />You picked {state.favorite} at {state.picked}
30 </div>
31 )}
32 </div>
33 )}
34</State>
同行
Toggle是维持布尔值状态的组件:
1<Toggle initial={false}>
2 {({ on, toggle }) => (
3 <div>
4 <input type="checkbox" checked={on} onChange={toggle} />
5 <br /><br />
6 {on && <div>This box is CHECKED!</div>}
7 {!on && <div>This box is NOT CHECKED!</div>}
8 </div>
9 )}
10</Toggle>
计数
计数允许您在状态中增加和减少一个整数:
1<Counter initial={0}>
2 {({ count, inc, dec }) => (
3 <div>
4 {count === 0 && <div>There are no little alligators</div>}
5 {count === 1 && <div>There is 1 little lonely alligator</div>}
6 {count > 1 && <div>There are {count} little alligators</div>}
7 <div>
8 <br />
9 <button onClick={dec}>-</button>
10 <button onClick={inc}>+</button>
11 </div>
12 </div>
13 )}
14</Counter>
价值
值是指维持一个值的状态. 设置它并忘记它:
1<Value initial="#008F68">
2 {({ value, set }) => (
3 <div>
4 <div
5 style={{
6 height: 100,
7 width: 100,
8 background: value,
9 margin: "0 auto"
10 }}
11 />
12 <div>
13 <br />
14 <button onClick={() => set("#008F68")}>#008F68</button>
15 <button onClick={() => set("#6DB65B")}>#6DB65B</button>
16 <button onClick={() => set("#4AAE9B")}>#4AAE9B</button>
17 </div>
18 </div>
19 )}
20</Value>
地图
地图组件与状态非常相似,因为它控制状态作为具有不同的属性的对象。
1<Map initial={{ reptile: "", picked: "" }}>
2 {({ set, get }) => (
3 <div>
4 <button
5 onClick={() => {
6 set("favorite", "Alligator");
7 set("picked", new Date().toLocaleTimeString());
8 }}
9 >
10 Alligator
11 </button>
12 <button
13 onClick={() => {
14 set("favorite", "Crocodile");
15 set("picked", new Date().toLocaleTimeString());
16 }}
17 >
18 Crocodile
19 </button>
20 <button
21 onClick={() => {
22 set("favorite", "");
23 set("picked", "");
24 }}
25 >
26 Reset
27 </button>
28 {get("favorite") &&
29 get("picked") && (
30 <div>
31 <br />You picked {get("favorite")} at {get("picked")}
32 </div>
33 )}
34 </div>
35 )}
36</Map>
设
不要与上面提到的设置方法混淆,该设置组件将其状态管理为您可以添加和删除从:
1<Set initial={["Alligator", "Crocodile"]}>
2 {({ values, add, remove }) => (
3 <div>
4 {values.length === 0 && <div>Our set is empty!</div>}
5 {values.length > 0 && (
6 <div>
7 {values.map(value => (
8 <div>
9 {value}
10 <button onClick={() => remove(value)}>X</button>
11 <br /><br />
12 </div>
13 ))}
14 </div>
15 )}
16 <input
17 type="text"
18 placeholder="Type here and hit enter"
19 onKeyPress={event => {
20 if (event.key === "Enter") {
21 add(event.target.value);
22 event.target.value = "";
23 }
24 }}
25 />
26 </div>
27 )}
28</Set>
列表
列表还将其状态作为一个数组,而不是简单的添加和删除方法,您通过推和拉方法与数组进行交互。
考虑到需要知道数组项目的索引时引入的复杂性,当从状态中拉出,我可能只是坚持设置:
1<List initial={["Alligator", "Crocodile"]}>
2 {({ list, push, pull }) => (
3 <div>
4 {list.length === 0 && <div>Our list is empty!</div>}
5 {list.length > 0 && (
6 <div>
7 {list.map(item => (
8 <div>
9 {item}
10 <button onClick={() => pull(i => item === i)}>X</button>
11 <br /><br />
12 </div>
13 ))}
14 </div>
15 )}
16 <input
17 type="text"
18 placeholder="Type here and hit enter"
19 onKeyPress={event => {
20 if (event.key === "Enter") {
21 push(event.target.value);
22 event.target.value = "";
23 }
24 }}
25 />
26 </div>
27 )}
28</List>
管理用户互动
跟踪用户与组件的互动通常包括绑定事件处理器,以及跟踪当前状态。
霍佛
Hover可追踪用户是否在浮动一个组件:
1<Hover>
2 {({ hovered, bind }) => (
3 <div {...bind}>
4 {!hovered && <div>See you later, alligator!</div>}
5 {hovered && <div>After 'while, crocodile!</div>}
6 </div>
7 )}
8</Hover>
活跃
活跃会知道用户是否正在点击组件:
1<Active>
2 {({ active, bind }) => (
3 <div {...bind}>
4 {!active && <span>Click here to activate!</span>}
5 {active && <span>STOP CLICKING ME!!</span>}
6 </div>
7 )}
8</Active>
触摸
与活跃类似,触摸组件是触摸友好的等效:
1<Touch>
2 {({ touched, bind }) => (
3 <div {...bind}>
4 {!touched && <span>Touch here to trigger!</span>}
5 {touched && <span>STOP TOUCHING ME!!</span>}
6 </div>
7 )}
8</Touch>
焦点
焦点非常适合根据用户当前正在与哪个领域进行交互来显示和隐藏信息:
1<Focus>
2 {({ focused, bind }) => (
3 <div>
4 <input
5 type="text"
6 placeholder="Click to focus this input!"
7 {...bind}
8 />
9 <div>
10 {focused
11 ? "Great for showing help text ONLY when focused!"
12 : ""}
13 </div>
14 </div>
15 )}
16</Focus>
形式
尽管 React PowerPlug 具有可以轻松使用来包装表单组件的组件,但它们仍然需要时间来包含一些表单特定的组件,以帮助您节省时间:
入口
输入,它与输入工作,而不是取代它,将输入事件绑定到一个输入或任何表单字段,并将值存储在状态中:
1<Input initial="">
2 {({ bind, value }) => (
3 <div>
4 <input type="text" {...bind} />
5 <div>
6 {value.length
7 ? `You typed: ${value}`
8 : "You have not typed anything :("}
9 </div>
10 </div>
11 )}
12</Input>
形式
表格组件将事情更进一步,允许您轻松跟踪表单上多个字段的状态:
1<Form initial={{ firstName: "", lastName: "" }}>
2 {({ input, values }) => (
3 <form
4 onSubmit={e => {
5 e.preventDefault();
6 console.log("Form Submission Data:", values);
7 }}
8 >
9 <input
10 type="text"
11 placeholder="Your First Name"
12 {...input("firstName").bind}
13 />
14 <input
15 type="text"
16 placeholder="Your Last Name"
17 {...input("lastName").bind}
18 />
19 <input type="submit" value="All Done!" />
20 </form>
21 )}
22</Form>
时间表
React PowerPlug 不仅用于跟踪状态变量和用户输入,您还可以使用它连接组件自动更新。
间隔
与我们讨论的其他组件不同,Interval不采取初始状态值,而是采取延迟(在毫秒)。
1<Interval delay={1000}>
2 {({ start, stop, toggle }) => (
3 <div>
4 Updates every second, last updated at:{" "}
5 {new Date().toLocaleTimeString()}
6 <br /><br />
7 <div>
8 <button onClick={() => stop()}>Stop</button>
9 <button onClick={() => start()}>Start</button>
10 {" or "}
11 <button onClick={() => toggle()}>Toggle!</button>
12 </div>
13 </div>
14 )}
15</Interval>
结论
React PowerPlug 支持声称在 React 中轻松快速构建应用程序原型,因为该项目目前正在进行中,我非常兴奋地看到 团队最终会拿到它!
我希望你喜欢这个 React PowerPlug 的运行,如果你有兴趣看到代码样本在行动,你可以转到 CodeSandbox。