状态管理工具

flux

是Facebook使用的一套前端应用架构模式

• 多个store
• 通过订阅发布的方式实现更新
• UI发出动作消息，将动作传递给分发器
• 分发器广播所有store
• 订阅的store做出反应，传递新的state给UI

说明：有点像自己实现redux源码时，更新视图也是通过订阅subscribe

redux

redux-源码

• 一个项目中只有一个store,单一数据源
• 访问store中的数据，需要通过父组件传递。不像flux，直接从store中取

import { connect } from "react-redux"
function mapStateToProps() {}
function mapActionToProps() {}
connect(mapStateToProps, mapActionToProps)(Com) 

• 当一个组件相关数据更新时，即使其他组件用不到相关数据，也会出发render。需要写复杂的shouldComponentUpdate来判断。或者mapStateToProps方法把各个组件各自需要的数据返回
• 利用React.Context.Provider来提供更新

mobx

底层实现：Object.defineProperty

文档地址

基于观察者模式

class Com extends React.Component {
    @observable price = 0;
    @observable amount = 1;
    @computed get total() {
        return this.price * this.amount;
    }
    render() {}
}