mobx开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情优势简单编写

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情

优势

简单

编写无模板的极简代码精准描述你的意图

轻松实现最优渲染

依赖自动追踪，实现最小渲染优化

架构自由

可移植, 可测试无特殊心智负担

环境搭建

使用creat-react-app 创建一个react项目

npx create-react-app mobx-react

安装 mobx 和 mobx-react-lite mobx-react-lite 是一个用来连接mobx和React的中间件

yarn add  mobx  mobx-react-lite

初始化mobx

初始化步骤

定义一个类，类里初始化一个属性状态 count state
在构造器中实现数据响应式处理 makeAutoObservble
定义修改数据count的函数 action
实例化store并导出

import {makeAutoObservable} from 'mobx'


class CounterStore {
  count = 0;
  constructor() {
    makeAutoObservable(this)
  }
  action=()=>{
    this.count++
  }
}

const counter=new CounterStore();
export default counter

使用 counterStore，使用 mobx-react-lite 的observer方法，将App组件包裹一下就可以了然后倒入 counterStore ,在组件中使用counterStore的属性，然后绑定点击事件更新方法，数组改变后，ui自动就改变了

import {  observer } from "mobx-react-lite"
import counterStore from "./store/counter"

function App() {
  return (
    <div className="App">
      App
      {counterStore.count}
      <button onClick={counterStore.action}>+1</button>
    </div>
  );
}
export default observer(App);

computed怎么实现

计算属性是对象中有get修饰符的方法创建一个原始的state list 使用get修饰符一个方法，然后里面利用list属性生成一个新的数组，并且返回。在构造函数中 makeAutoObservable 方法中标记计算属性，不标记也没影响，就是告诉其他人，这个是计算属性，看着清楚一些

class CounterStore {
  count = 0
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this,{
      filterList:computed
    })
  }
  // 定义计算属性
  get filterList () {
    return this.list.filter(item => item > 2)
  }
  // 修改原数据后，计算属性会重新复制
  addList=(i)=>{
    this.list.push(i)
  }
}

mobx的使用和vue是一样的，非常清爽，