react里数据流向

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();
  };