React-Mobx(入门)

这篇具有很好参考价值的文章主要介绍了React-Mobx(入门)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1. Mobx介绍

优势 

社区评价

​编辑

 2.配置开发环境

3.基础使用

1)初始化mobx

2)React使用store

 4.计算属性(衍生状态)

 5.异步数据处理

6. 模块化

1)定义task模块 

 2)定义counterStore

3)组合模块导出统一方法

4)组件使用模块中的数据

7. 多组件共享数据

文章推荐


1. Mobx介绍

一个可以和React良好配合的集中状态管理工具,和Redux解决的问题相似,都可以独立组件进行集中状态管理

React-Mobx(入门)

优势 

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

        2.轻松实现最优渲染: 依赖自动追踪,实现最小渲染优化

        3.架构自由: 可移植, 可测试 无特殊心智负担

社区评价

React-Mobx(入门)

 2.配置开发环境

Mobx是一个独立的响应式的库,可以独立于任何UI框架存在,但是通常大家习惯把它和React进行绑定使用,用Mobx来做响应式数据建模,React作为UI视图框架渲染内容,我们环境的配置需要三个部分

  1. 一个create-react-app创建好的React项目环境
  2. mobx框架本身
  3. 一个用来链接mobx和React的中间件
# 创建项目
$ yarn create vite react-mobx --template react

# 安装mobx和中间件工具 mobx-react-lite  只能函数组件中使用
$ yarn add  mobx  mobx-react-lite

3.基础使用

        简单使用mobx实现一个计数器的案例

React-Mobx(入门)

1)初始化mobx

初始化步骤

  1. 定义数据状态state
  2. 在构造器中实现数据响应式处理 makeAutoObservble
  3. 定义修改数据的函数action
  4. 实例化store并导出
//counterStore.js
import { makeAutoObservable } from 'mobx'

class CounterStore {
  count = 0 // 定义数据
  constructor() {
    makeAutoObservable(this)  // 响应式处理
  }
  // 定义修改数据的方法
  addCount = () => {
    this.count++
  }
}

const counter = new CounterStore()
export default counter

2)React使用store

实现步骤

  1. 在组件中导入counterStore实例对象
  2. 在组件中使用storeStore实例对象中的数据
  3. 通过事件调用修改数据的方法修改store中的数据
  4. 让组件响应数据变化
//App.js
// 导入counterStore
import counterStore from './store'

// 导入observer方法
import { observer } from 'mobx-react-lite'

function App() {
  return (
    <div className="App">
      <button onClick={() => counterStore.addCount()}>
        {counterStore.count}
      </button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(App)

 4.计算属性(衍生状态)

概念: 有一些状态根据现有的状态计算(衍生)得到,我们把这种状态叫做计算属性, 看下面的例子

React-Mobx(入门)

 实现步骤

  1. 生命一个存在的数据
  2. 通过get关键词 定义计算属性
  3. 在 makeAutoObservable 方法中标记计算属性
//counterStore.js
import { computed, makeAutoObservable } from 'mobx'

class CounterStore {
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this, {
      filterList: computed
    })
  }
  // 修改原数组
  changeList = () => {
    this.list.push(7, 8, 9)
  }
  // 定义计算属性
  get filterList () {
    return this.list.filter(item => item > 4)
  }
}

const counter = new CounterStore()

export default counter

 5.异步数据处理

实现步骤:

  1. 在mobx中编写异步请求方法 获取数据 存入state中
  2. 组件中通过 useEffect + 空依赖 触发action函数的执行
//channelStore.js
// 异步的获取

import { makeAutoObservable } from 'mobx'
import axios from 'axios'

class ChannelStore {
  channelList = []
  constructor() {
    makeAutoObservable(this)
  }
  // 只要调用这个方法 就可以从后端拿到数据并且存入channelList
  setChannelList = async () => {
    const res = await axios.get('http://www.bai.net/channels')
    this.channelList = res.data.data.channels
  }
}
const channlStore = new ChannelStore()
export default channlStore
//App.js
import { useEffect } from 'react'
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
function App() {
  const { channlStore } = useStore()
  // 1. 使用数据渲染组件
  // 2. 触发action函数发送异步请求
  useEffect(() => {
    channlStore.setChannelList()
  }, [])
  return (
    <ul>
      {channlStore.channelList.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}
// 让组件可以响应数据的变化[也就是数据一变组件重新渲染]
export default observer(App)

6. 模块化

场景: 一个项目有很多的业务模块,我们不能把所有的代码都写到一起,这样不好维护,提了提供可维护性,需要引入模块化机制 

React-Mobx(入门)

实现步骤

  1. 拆分模块js文件,每个模块中定义自己独立的state/action
  2. 在store/index.js中导入拆分之后的模块,进行模块组合
  3. 利用React的context的机制导出统一的useStore方法,给业务组件使用

1)定义task模块 

import { makeAutoObservable } from 'mobx'

class TaskStore {
  taskList = []
  constructor() {
    makeAutoObservable(this)
  }
  addTask () {
    this.taskList.push('vue', 'react')
  }
}

const task = new TaskStore()


export default task

 2)定义counterStore

import { makeAutoObservable } from 'mobx'

class CounterStore {
  count = 0
  list = [1, 2, 3, 4, 5, 6]
  constructor() {
    makeAutoObservable(this)
  }
  addCount = () => {
    this.count++
  }
  changeList = () => {
    this.list.push(7, 8, 9)
  }
  get filterList () {
    return this.list.filter(item => item > 4)
  }
}

const counter = new CounterStore()

export default counter

3)组合模块导出统一方法

import React from 'react'

import counter from './counterStore'
import task from './taskStore'


class RootStore {
  constructor() {
    this.counterStore = counter
    this.taskStore = task
  }
}

const rootStore = new RootStore()

// context机制的数据查找链  Provider如果找不到 就找createContext方法执行时传入的参数
const context = React.createContext(rootStore)

const useStore = () => React.useContext(context)
// useStore() =>  rootStore  { counterStore, taskStore }

export { useStore }

4)组件使用模块中的数据

import { observer } from 'mobx-react-lite'
// 导入方法
import { useStore } from './store'
function App() {
  // 得到store
  const store = useStore()
  return (
    <div className="App">
      <button onClick={() => store.counterStore.addCount()}>
        {store.counterStore.count}
      </button>
    </div>
  )
}
// 包裹组件让视图响应数据变化
export default observer(App)

7. 多组件共享数据

目标:当数据发生变化 所有用到数据的组件都会得到同步的组件的更新

实现步骤:在Foo组件和Bar组件中分别使用store中的数据,然后在app组件中进行数据修改,查看Foo组件和Bar组件是否得到更新

React-Mobx(入门)

// Bar.js
// 用taskStore中的taskList数据
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
const Bar = () => {
  const { taskStore } = useStore()
  return (
    <ul>
      {taskStore.taskList.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  )
}

export default observer(Son)
//Foo.js
// 用taskStore中的taskList数据
import { useStore } from './store'
import { observer } from 'mobx-react-lite'
const Bar = () => {
  const { taskStore } = useStore()
  return (
    <ul>
      {taskStore.taskList.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  )
}

export default observer(Son)
//App.js
import Bar from './Bar'
import Foo from './Foo'
import { useStore } from './store'
function App() {
  const { taskStore } = useStore()
  return (
    <div className="App">
      <Bar />
      <button onClick={() => taskStore.setTaskList('angular')}>
        修改taskStore
      </button>
    </div>
  )
}
export default App

文章推荐

        1.React组件(进阶--children/props) 

        2.React组件(进阶--生命周期 ) 

        3.React--hooks详解(入门) 

        4.React--hooks详解(进阶) 

        5.React-Router详解(入门) 文章来源地址https://www.toymoban.com/news/detail-431894.html

到了这里,关于React-Mobx(入门)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 《JavaCV从入门到实战教程合集》介绍和目录

    《JavaCV音视频合集》是《JavaCV入门指南》、《JavaCV开发详解》、《JavaCV进阶之FFmpeg》和2022年《JavaCV音视频开发宝典》四合一汇总合集,完整包含《JavaCV入门指南》、《JavaCV开发详解》、《JavaCV进阶之FFmpeg》和《JavaCV音视频开发宝典》系列所有付费内容。 《JavaCV入门指南》 《

    2023年04月11日
    浏览(37)
  • Vue基础入门(2)- Vue的生命周期、Vue的工程化开发和脚手架、Vue项目目录介绍和运行流程

    Vue生命周期:就是一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个阶段: ① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段:创建响应式数据 2.挂载阶段:渲染模板 3.更新阶段:修改数据,更新视图 watch 是监听的数据修改就触发, updated 是整个组件的dom更新才触发 4.销毁

    2024年03月10日
    浏览(60)
  • React学习之路-目录结构

    node_modules  —  存放项目依赖包 public  —  存放网站的静态资源文件 favicon.icon  —  网站偏爱图标 index.html  —  主页面(重要) logo192.png  —  logo图 logo512  —  logo图 manifest.json  —  应用加壳的配置文件 robots.txt  —  爬虫协议文件 src  —  存放源代码,基于ES6规则的

    2024年02月09日
    浏览(62)
  • React + 二级目录 + Nginx配置

    背景: 由于子域名有限,我们需要将不同的前端项目进行二级目录区分。 一、项目 现有三个项目: bsrm-web-manage bsrm-web-operator bsrm-web-testingorganization 二、期望访问路径 http://bsrm.life.com/bsrm-web-manage http://bsrm.life.com/bsrm-web-operator http://bsrm.life.com/bsrm-web-testingorganization 三、React 配

    2024年02月15日
    浏览(46)
  • React配置src根目录@

    yarn eject or npm run eject 如果报错了记得提前 git commit 一下 找到 webpack.config.js 文件 在 webpack.config.js 文件中找到 alias 配置 在alias里添加 \\\'@\\\': path.resolve(\\\'src\\\') , 或者 \\\'@\\\': path.join(__dirname,\\\'../src\\\') , 重新 npm start 即可

    2024年01月20日
    浏览(70)
  • 跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制

    📈「作者简介」:前端开发工程师 | 蓝桥云课签约作者 | 技术日更博主 | 已过四六级 📚「个人主页」:阿珊和她的猫 🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️) Vue.js 和 Egg.js 开发企业级健康管理项目 带你从入门到实战全面掌握 uni-app UniApp 是一种 基

    2024年02月16日
    浏览(36)
  • Go~介绍与优势

    Go(又称为Golang)是一门由Google开发的开源编程语言,于2009年首次公开发布。Go语言被设计用来提高软件开发的效率和可靠性,在处理大规模系统时表现出色。以下是Go语言的一些特点和优势: 简洁易读 :Go语法简洁清晰,易于阅读和学习,减少了代码的复杂性。 并发支持

    2024年03月18日
    浏览(36)
  • Salesforce lightning优势介绍

    今天我要给大家说说,Salesforce的两个版本:第一代Classic UI,和13年以来为迎接移动化趋势而推出的新Lightning UI。Classic马上就要和我们说88了,那Lightning究竟有哪些大杀器让我们无法抗拒呢?让我们一探究竟吧。 首先让我们盘点一下Lightning的七大优势 1.首页特性:不仅包括了

    2024年01月21日
    浏览(36)
  • React框架课时二认识项目的结构目录一

    ├── README.md 使用方法的文档 ├── node_modules 所有的依赖安装的目录 ├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。 ├── package.json ├── public 静态公共目录 └── src 开发用的源代码目录 2 图片的演示如图所示 README.md 使用方法的文档

    2024年02月02日
    浏览(76)
  • 读数据压缩入门笔记08_评价数据压缩

    3.3.1.1. 在客户端请求数据库操作的结果 3.3.1.2. 服务器发送了动态布局的数据 3.3.1.3. 平衡压缩后的大小与所需要的时间 3.3.1.4. 目的就是让通过网络传输的内容变得更小 3.3.1.5. 权衡取舍的是时间 3.3.2.1. 需要确保手边的媒体文件尽量地小 3.3.2.2. 由云端传输出去的每个二进制

    2024年02月16日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包