react里数据流向方式大概分为三种:
1. 最常用的props传递 (父传子)
2.Provider-Consumer 方式
3.发布订阅模式。
下面主要介绍第三者方式。
好处是可以跨越多个层级,不用关心数据的流向,只需在需要的组件订阅,在适当的时机触发发布就可以改变组件的状态。当然坏处是可能会破坏组件的独立性,使得数据流向不受控。
实现:
dep.js
class Dep {
constructor() {
this.list = [];
}
subscribe(event) {
this.list.push(event);
}
notify() {
this.list.forEach((item) => {
item.update();
});
}
}
const dep = new Dep();
export default dep;
A组件
if (!Dep.target) {
Dep.subscribe({
name: '2',
update: () => {
setVisible((pre) => {
return !pre;
}); // 很奇葩 用 setVisible(!visible) 就改变不了visible,但是用函数去写就可以。怀疑是this指向问题,但是这个是个hooks组件,都没有this,所以很奇怪
},
});
Dep.target = true;
}
// jsx
return (
<div>
{
visible && (
<button onClick={click}>++
</button>
)
}
</div>
);
B组件
// 某个事件触发发布事件
const notify = () => {
Dep.notify();
};