Hox 是下一代的 React 状态管理器,关于它的更多介绍可以参考这篇文章,本文假设你已经对 hox 的用法有了初步的了解。
在 hox 中,我们希望能充分发挥 React Hooks 的特性,也希望让全局状态和组件内部状态的编写体验保持一致,所以我们使用 custom Hook 的方式定义 model 的逻辑。
我们不妨先来看下一个普通的 custom Hook 是什么样的效果吧:
export function useFoo() {
const [count, setCount] = useState(0)
function increment() {
setCount(count + 1)
}
return {
count,
increment,
}
}
我们可以在组件中调用 useFoo :
export function ComponentA() {
const foo = useFoo()
return (
<div>
<p>{foo.count}</p>
<button onClick={foo.increment}>Increment</button>
</div>
)
}
不难发现,我们通过定义 custom Hook ,对逻辑进行了一层封装,也让组件变得更加简洁。然而,如果此时我们再创建一个 B 组件:
export function ComponentB() {
const foo = useFoo()
return (
<div>
<p>{foo.count}</p>
</div>
)
}
当我们点击 A 组件中的 Increment 按钮时,B 组件中的数字会跟着变化么? 答案自然是不会的,因为 useFoo 这个 custom Hook 虽然实现了逻辑的封装和复用,但是却并不能让数据共享。
而 hox ,就是为了解决这个问题而生。
我们不妨接着上面的例子,使用 hox 提供的 createModel 对 useFoo 进行一层封装:
const useFooModel = createModel(useFoo)
createModel 会创建一个 Executor 组件的实例,并在其中执行 useFoo 这个 Hook ,并把 useFoo 的执行结果保存起来。最后,它会返回一个新的 Hook: useFooModel 。乍一看, createModel 和 HOC (高阶组件)甚至有几分神似。
不同于 useFoo ,在调用 useFooModel 时,我们并不是真的执行了 useFoo 这个 custom Hook ,而是向 Executor 组件进行数据的订阅。也就是说,如果我们在多个组件中都调用了 useFooModel ,那它们所拿到的数据实际上是同一份,更准确的说,它们拿到的那份数据,就是存在 Executor 中的那份 state 。
通过这种方式,我们让 custom Hook 可以做到数据的共享,这也是 createModel 之所以叫做 createModel 的原因:通过它,我们把一个 custom Hook 变成了一个全局的 model 。
现在,我们再来更新一下刚才的例子:
export function ComponentA() {
const foo = useFooModel() // 这里从 useFoo 变成了 useFooModel
return (
<div>
<p>{foo.count}</p>
<button onClick={foo.increment}>Increment</button>
</div>
)
}
export function ComponentB() {
const foo = useFooModel() // 这里从 useFoo 变成了 useFooModel
return (
<div>
<p>{foo.count}</p>
</div>
)
}
现在,A B 两个组件都获取到了 Executor 中的那份数据,并且订阅了它未来的更新。因此当我们点击组件 A 的 Increment 按钮时,我们实际上是触发了 Executor 组件中的一个 setState ,然后 Executor 组件进行重渲染,通知它的订阅者们。A 组件和 B 组件收到了更新通知和新的数据,也会跟着重新进行渲染。最终我们可以看到,A B 两个组件显示的数字都变成了 1 。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h63672.shtml