【Mobx和React的职责划分】Todos综合案例分析（附源码）

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了Mobx集中状态管理工具 参考文章👉🏻【MobX集中状态管理工具】MobX真的取代了Redux吗 今天来学习关于Mobx的一个小案例！ 感兴趣的小伙伴一起来看看吧~🤞

Todos综合案例 效果

Mobx和React的职责划分

列表渲染

src/Todo/index.js

import './index.css'
import { useStore } from '../store'
import { observer } from 'mobx-react-lite'

function Task () {
  const { taskStore } = useStore()
  
  return (
    
      
        
          {/* 列表区域 */}
          {taskStore.list.map(item => (
            
              
                
                {item.name}
                
              
            
          ))}
        
      
      
        
          任务总数: {10} 已完成: {1}
        
      
    
  )
}

export default observer(Task)

单选实现

实现思路和步骤：本质上是在实现双向绑定

1. 通过store中的数据状态 isDone字段，绑定到input元素的 checked属性上
2. 监听事件，调用mobx的对应方法，传入id，找到要修改的项，把isDone字段取反操作

src/store/taskStore.js

import { makeAutoObservable } from 'mobx'
class TaskStore {
  list = [
    {
      id: 1,
      name: '学习react',
      isDone: true
    },
    {
      id: 2,
      name: '搞定mobx',
      isDone: false
    }
  ]
  constructor() {
    makeAutoObservable(this)
  }
  // 单选操作
  singleCheck(id, isDone) {
    // 查找
    const item = this.list.find(item => item.id === id)
    item.isDone = isDone
  }
}
export default TaskStore

src/Todo/index.js

// 单选受控
// 思想：mobx Store去维护状态，input只需要把e.target.checked交给store让它来进行维护
function onChange(id, e) {
  // console.log(id, e.target.checked)
  taskStore.singleCheck(id, e.target.checked)
}
...
{/* 单选框 受控和非受控 受控的方法*/}
 onChange(item.id, e)} />
...

全选功能

实现思路和步骤:

1. 实现数据驱动权限UI显示，通过计算属性 + every方法
2. 实现点击权限，控制所有子项，change事件拿到e.target.checked，遍历list进行isDone赋值

src/store/taskStore.js

// 全选操作
allCheck(checked) {
  // 把所有项的isDone属性，都按照传入的最新的状态修改
  this.list.forEach(item => {
    item.isDone = checked
  })
}

// 计算属性 只有所有子项都是选中的时候，才是选中的状态
get isAll() {
  return this.list.every(item => item.isDone)
}

src/Todo/index.js

// 全选
function allChange(e) {
  taskStore.allCheck(e.target.checked)
}
...
{/* 全选框 */}

删除功能

实现思路和步骤：

1. 在mobx中定义好删除数据的方法

2. 点击删除，调用mobx提供的删除方法，传出id，进行删除

src/store/taskStore.js

// 删除操作
delTask(id) {
  this.list = this.list.filter(item => item.id !== id)
}

src/Todo/index.js

// 删除
function delTask(id) {
  taskStore.delTask(id)
}
...
{/* 删除按钮 */}
 { delTask(item.id) }}>

回车新增功能

实现思路和步骤:

1. 在mobx中编写新增方法的逻辑
2. 在组件中通过受控方式维护输入框中的数据
3. 在组件中监听keyUp方法 判断当前是否点击的是回车键 如果是 调用mobx的方法进行新增

src/store/taskStore.js

// 新增
addTask(task) {
  this.list.push(task)
}

src/Todo/index.js

// 新增用户输入,受控方式维护输入框数据
const [taskValue, setTaskValue] = useState('')
function insertTask(e) {
  if (e.keyCode !== 13) return
  if (e.target.value.trim() === '') {
    alert('输入的内容不能为空')
    return
  }
  taskStore.addTask(
    {
      id: nanoid(),
      name: taskValue,
      isDone: false
    }
  )
  setTaskValue('')
  // e.target.value = ''
}
...
{/* 新增输入框 */}
 setTaskValue(e.target.value)} 
	onKeyUp={(e) => { insertTask(e) }} />

统计计数功能

实现思路和步骤:

1. 在mobx中编写已完成的数量的计算属性的逻辑
2. 在组件中调用渲染

src/store/taskStore.js

// 已完成的数量的计算属性
get isFinishedLength() {
  return this.list.filter(item => item.isDone).length
}

src/Todo/index.js

  
    任务总数：{taskStore.list.length} 已完成：{taskStore.isFinishedLength}
	

今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下 🤞 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！