首先我们要实现上面的结构，根组件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可以让不懂英语的前端去努力的学习英语（否则你根本不懂每个部分的意思）
