组件通信eventHub和Redux

作者: sweetBoy_9126 | 来源:发表于2019-09-27 10:37 被阅读0次

首先我们要实现上面的结构，根组件App下面有两个子组件大爸和二爸，他们分别都有两个子组件，然后我们要在全局声明一个money属性，所有的组件都可以拿到这个money，而我们要实现的就是儿子2把钱花了如何通知儿子3

基础代码

let money = {
  amount: 100000
};
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return (
      <div className="root">
        App
        <BigFather />
        <SmallFather />
      </div>
    );
  }
}
class BigFather extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return (
      <div className="father">
        大爸爸{this.state.money.amount}
        <Son1 />
        <Son2 />
      </div>
    );
  }
}
class SmallFather extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return (
      <div className="father">
        小爸爸{this.state.money.amount}
        <Son3 />
        <Son4 />
      </div>
    );
  }
}
class Son1 extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return <div className="son">儿子1 {this.state.money.amount}</div>;
  }
}
class Son2 extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return <div className="son">儿子2 {this.state.money.amount}</div>;
  }
}
class Son3 extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return <div className="son">儿子3 {this.state.money.amount}</div>;
  }
}
class Son4 extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return <div className="son">儿子4 {this.state.money.amount}</div>;
  }
}

ReactDOM.render(<App />, document.querySelector("#root"));

我们直接通过儿子2修改money

class Son2 extends React.Component {
+  fn = () => {
    money.amount -= 100;
    this.setState({
      money
    });
  };
  render() {
    return (
      <div className="son">
        儿子2 {this.state.money.amount} <button onClick={this.fn}>消费</button>
      </div>
    );
  }
}

问题：只有当前的儿子2里的金额改了，其他的里面的金额却还是之前的；
解决方法：通过一个eventHub事件中心来实现价格修改的订阅发布

let eventHub = {
  events: {},
  trigger(eventName, data, that) {
    for (let key in this.events) {
      if (key === eventName) {
        this.events[key].map(fn => {
          fn.call(that, data);
        });
      }
    }
  },
  on(eventName, fn) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(fn);
  }
};
class Son2 extends React.Component {
  fn = () => {
    money.amount -= 100;
+    eventHub.trigger("我花钱了", money, this);
    this.setState({
      money
    });
  };
  render() {
    return (
      <div className="son">
        儿子2 {this.state.money.amount} <button onClick={this.fn}>消费</button>
      </div>
    );
  }
}
class Son3 extends React.Component {
+    eventHub.on("我花钱了", data => {
      this.setState({
        money: data
      });
    });
  }
  render() {
    return <div className="son">儿子3 {this.state.money.amount}</div>;
  }
}

上面的代码已经实现了儿子2更新，儿子3也跟着更新，但是如果我们其他的组件也要知道儿子2里的money，那么我们就得在每个组件里都写一遍监听，这样代码就会很复杂

改进

第一个原则：所有的组件不准修改money，只有根组件可以存money，其他的组件都通过props传进来
因为我们不能让每个组件直接修改money，所以我们需要一个管家来帮着我们修改money，哪个组件想要修改money，只需要发布一个事件通知这个管家，管家监听这个事件，对money进行修改，然后重新render

// x就是管家
let x = {
  init() {
    eventHub.on("我想要花钱", data => {
      money.amount -= data;
      //修改后重新渲染
      render();
    });
  }
};
x.init();
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      money
    };
  }
  render() {
    return (
      <div className="root">
        App
        <BigFather money={this.state.money} />
        <SmallFather money={this.state.money} />
      </div>
    );
  }
}
class BigFather extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div className="father">
        大爸爸{this.props.money.amount}
        <Son1 money={this.props.money} />
        <Son2 money={this.props.money} />
      </div>
    );
  }
}
class SmallFather extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div className="father">
        小爸爸{this.props.money.amount}
        <Son3 money={this.props.money} />
        <Son4 money={this.props.money} />
      </div>
    );
  }
}
class Son1 extends React.Component {
  constructor() {
    super();
  }
  render() {
    return <div className="son">儿子1 {this.props.money.amount}</div>;
  }
}
class Son2 extends React.Component {
  constructor() {
    super();
  }
  fn = () => {
    eventHub.trigger("我想要花钱", 100);
  };
  render() {
    return (
      <div className="son">
        儿子2 {this.props.money.amount} <button onClick={this.fn}>消费</button>
      </div>
    );
  }
}
class Son3 extends React.Component {
  constructor() {
    super();
    eventHub.on("我花钱了", data => {
      this.setState({
        money: data
      });
    });
  }
  render() {
    return <div className="son">儿子3 {this.props.money.amount}</div>;
  }
}
class Son4 extends React.Component {
  constructor() {
    super();
  }
  render() {
    return <div className="son">儿子4 {this.props.money.amount}</div>;
  }
}
function render() {
  ReactDOM.render(<App />, document.querySelector("#root"));
}
render();

完整代码：https://codesandbox.io/s/determined-bas-7ih6p

Redux

store: 把所有的数据放在store中
action: 事件触发里的参数对象，也就是上面代码中的eventHub.trigger('我想花钱', 100)里的('我想花钱', 100)
type: 事件触发的事件名(我想花钱)
payload: 事件触发的的第二个参数(100)
reducer: 对数据修改的操作money.amount -= data
subscribe: 事件监听eventHub.on()

根据官方文档改写eventHub为Redux
因为Redux自带了eventHub和管家，所以我们可以把之前的eventHub和管家有关的代码都删掉

创建store

import { createStore } from "redux";
let reducers = (state = { money: { amount: 100000 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};
const store = createStore(reducers);

我们原来的初始值money需要写在reducers里也就是上面的state = { money: { amount: 100000 }

将原先store里的数据换成store.getState()

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      money: store.getState().money
    };
  }
}

将触发事件改成dispatch

store.dispatch({ type: '我想花钱', payload: 100 })
//等价于 eventHub.trigger("我想花钱", 100)

在reducers里对store的数据进行修改

let reducers = (state = { money: { amount: 100000 } }, action) => {
  switch (action.type) {
    case "我想花钱":
      return {
        money: {
          amount: state.money.amount - action.payload
        }
      }
    default:
      return state;
  }
};

调用render后然后监听事件，将App的store获取方式也改成props传递

function render() {
  ReactDOM.render(
    <App store={store.getState()} />,
    document.querySelector("#root")
  );
}
render()
store.subscribe(render)

完整代码：https://codesandbox.io/s/small-fire-m2vdj

Redux的优缺点

Redux的主要功能是防呆
Redux与eventHub相比的优势：

使用eventHub我们的事件名完全是随心所欲的，而Redux把事件名和参数做了约束（必须把每一个事件名对对应一个type，参数对应一个payload，然后把所有的事件都要列在reducers里面的switch下面）
使用Redux我们的state都要是只读的，它从api(store.getState())上告诉了我们不要去修改state，当然尽管我们还是可以修改，那是因为js没法限制对一个对象的修改
Redux可以让不懂英语的前端去努力的学习英语（否则你根本不懂每个部分的意思）

网友评论

本文标题：组件通信eventHub和Redux

本文链接：https://www.haomeiwen.com/subject/vfiquctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

组件通信eventHub和Redux

改进

Redux

Redux的优缺点

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读