mobx基础概念及使用

mobx与redux都是react状态管理的，mobx相对简单一些，所以就先学它。

mobx是单向数据流，通过观察者模式对数据进行跟踪，当所观察的属性发生变化或者（被？）引用时，触发依赖的监听函数。在react中通过@observable设置可观察数据（state），通过@observer（观察者）对组件进行数据的更新和监听，并渲染到视图，当@action修改观察的数据时，触发@observer对组件数据更新并重新渲染到视图。@computed，计算属性，get和set可以用来控制computed。

toJS方法：递归地将一个(observable)对象转换为 javascript 结构。 支持 observable 数组、对象、映射和原始类型。

inject

在项目中使用到了inject，虽然知道是注入，但是不知道具体的使用方法，一开始直接用@inject疯狂报错。。。

先看一段官网的解释

1
2

inject (mobx-react 包)
相当于Provider 的高阶组件。可以用来从 React 的context中挑选 store 作为 prop 传递给目标组件。

直接在组件前@inject会报以下错误❌

1

Error: MobX injector: Store 'todoList' is not available! Make sure it is provided by some Provider

然后搜了一圈资料，发现是要在父组件中添加provider，搬来的一个例子👍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@inject('todoList')
class ToDoApp extends Component{
    render(){
        return (
            <div>
                <TodoListView todoList={this.props.todoList}/>
            </div>
        );
    }
}

class App extends Component{
    render(){
        return(
            <Provider todoList={todoList}>
                <ToDoApp/>
            </Provider>
        )
    }
}

—————–11.14

mobx中store的数组通过map中的index修改时，直接报错，说0/1属性无法访问到

解决：使用map方法修改时，里面的函数是需要返回值的。报错是因为map中调用的函数没有返回值。

mobx中store数据修改后不能重新渲染

解决：是因为mobx版本问题，6.版本以上需要引入makeObservable。见另一篇文