mobx在react中的使⽤以及使⽤mobx实现跨组件交互
跨组件交互
在不使⽤其它框架、类库的情况下，React要实现跨组件交互这⼀功能相对有些繁琐。通常我们需要在⽗组件上定义⼀个state和⼀个修改该state的函数。然后把state和这个函数分别传到两个⼦组件⾥，在逻辑简单，且⼦组件很少的时候可能还好，但当业务复杂起来后，这么写就⾮常繁琐，且难以维护。⽽⽤Mobx就可以很好地解决这个问题。来看看以下的例⼦：
react组件之间通信class MyState {
@observable num1 = 0;
@observable num2 = 100;
@action addNum1 = () => {
this.num1 ++;
};
@action addNum2 = () => {
this.num2 ++;
};
@computed get total() {
return this.num1 + this.num2;
}
}
const newState = new MyState();
const AllNum = observer((props) => <div>num1 + num2 = {al}</div>);
const Main = observer((props) => (
<div>
<p>num1 = {props.store.num1}</p>
<p>num2 = {props.store.num2}</p>
<div>
<button onClick={props.store.addNum1}>num1 + 1</button>
<button onClick={props.store.addNum2}>num2 + 1</button>
</div>
</div>
));
@observer
export default class App extends React.Component {
render() {
return (
<div>
<Main store={newState} />
<AllNum store={newState} />
</div>
);
}
}
有两个⼦组件，Main和AllNum (均采⽤⽆状态函数的⽅式声明的组件)
在MyState中存放了这些组件要⽤到的所有状态和函数。
之后只要在⽗组件需要的地⽅实例化⼀个MyState对象，需要⽤到数据的⼦组件，只需要将这个实例化的对象通过props传下去就好了。
那如果组件树⽐较深怎么办呢？
我们可以借助React15版本的新特性context来完成。它可以将⽗组件中的值传递到任意层级深度的⼦组件中。--详情可以查看React的官⽅⽂档
接下来看看⽹络请求的情况。
useStrict(true);
class MyState {
@observable data = null;
@action initData = async() => {
const data = await getData("xxx");
runInAction("说明⼀下这个action是⼲什么的。不写也可以", () => {
this.data = data;
})
};
}
严格模式下，只能在action中修改数据，但是action只能影响到函数当前状态下的情景，也就是说在await之后发⽣的事情，这个action就修饰不到了，于是我们必须要使⽤了runInAction(详细解释见上⽂)。
当然如果你不开启严格模式，不写runInAction也不会报错。
个⼈强烈建议开启严格模式，这样可以防⽌数据被任意修改，降低程序的不确定性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。