1 | # Rectx
|
2 |
|
3 | > React + Context -> Rectx, 轻量级状态管理库。
|
4 |
|
5 | ## 安装
|
6 |
|
7 | ```bash
|
8 | npm install --save rectx
|
9 | ```
|
10 |
|
11 | ## 简单使用
|
12 |
|
13 | ```js
|
14 | import React from 'react'
|
15 | import ReactDOM from 'react-dom'
|
16 | import { Provider, Controller, Listen } from 'rectx'
|
17 |
|
18 | class LikeController extends Controller {
|
19 | state = {
|
20 | isLike: false,
|
21 | isMount: false
|
22 | }
|
23 |
|
24 | handleClick = () => {
|
25 | this.setState({
|
26 | isLike: !this.state.isLike
|
27 | })
|
28 | }
|
29 | }
|
30 |
|
31 | const Like = () => (
|
32 | <Listen
|
33 | to={[LikeController]}
|
34 | didMount={like => {
|
35 | like.setState({ isMount: true })
|
36 | }}
|
37 | >
|
38 | {like => (
|
39 | <div>
|
40 | <button onClick={() => like.handleClick()}>Click me</button>
|
41 | <div>{like.state.isMount ? 'component being loaded' : 'component not loaded'}</div>
|
42 | <div>{like.state.isLike ? 'I love you' : 'I hate you'}</div>
|
43 | </div>
|
44 | )}
|
45 | </Listen>
|
46 | )
|
47 |
|
48 | ReactDOM.render(
|
49 | <Provider>
|
50 | <Like />
|
51 | </Provider>,
|
52 | document.getElementById('root')
|
53 | )
|
54 | ```
|
55 |
|
56 | 现在我们已经完成了一个非常简单的例子。在这个例子中,我们定义了一个 LikeMachine 状态机,用于保存 Like 组件所需要的一切状态。
|
57 |
|
58 | ## 意义何在?
|
59 |
|
60 | 让我们认真的观察一下这段简单的代码,很快你就能发现其中的奥妙:
|
61 |
|
62 | ```js
|
63 | class LikeMachine extends Machine {
|
64 | state = {
|
65 | isLike: false
|
66 | }
|
67 |
|
68 | handleClick = () => {
|
69 | this.setState({
|
70 | isLike: !this.state.isLike
|
71 | })
|
72 | }
|
73 | }
|
74 |
|
75 | const Like = () => (
|
76 | <Listen to={[LikeMachine]}>
|
77 | {like => (
|
78 | <div>
|
79 | <button onClick={() => like.handleClick()} />
|
80 | <div>{like.state.isLike ? 'I love you' : 'I hate you'}</div>
|
81 | </div>
|
82 | )}
|
83 | </Listen>
|
84 | )
|
85 | ```
|
86 |
|
87 | 发现了吗?只要使用 `<Listen to={[LikeMachine]}/>` 对组件进行包裹,那么这个组件就拥有了监听状态变化的能力。没错,这其实还是 PUB/SUB 模式的一种,但是相对于 Redux 我们更好理解。因为,我们依旧在使用 ``setState API `` 。
|
88 |
|
89 |
|
90 |
|
91 |
|