全局状态管理之<MobX>

回顾一下和数据传输相关的 React 知识

• 组件内
  • class 组件 state
  • 函数组件 useState
• 组件间
  • props 传递
  • createContext、Provider、Consumer

一、核心概念

二、基本用法

import {observable,computed,action,autorun} from 'mobx'

State

// State，被观察者
const todos = observable([
  {
      title:'起床'，
    cimpleted:false
  },
  {
      title:'穿衣',
    completed:false
  },
  {
      title:'洗漱',
    completed:false
  }
])

Computed values

// Computed values，由 State 的更新触发
let uncompletedCont = computed(
    ()=>todos.filter(todo => !todo.completed).length
)

Reaction

// Reactions，由 State 和 Computed Values 的改变触发执行
autorun(()=>{
    console.log(
      `剩余任务:${uncompletedCont}`,
    todos
        .filter(todo=>!todo.completed)
        .map(todo=>todo.title)
        .join(',')
  )
})

Action

// Actions，用来改变被观察者 State
const doTask = action(()=>{
    todos.find(todo=>!todo.completed).completed = true
})
doTask()

三、核心思想

状态的改变引发一系列自动行为

（结合 React 使用的方法待更新）

「@浪里淘沙的小法师」