使用mobX全功能组件
MobX是一个用于状态管理的JavaScript库，它可以帮助开发者更轻松地管理应用程序的状态。它提供了一种简单且可扩展的方式来跟踪和更新应用程序中的数据，使得数据的变化能够自动地反映在用户界面上。
MobX的核心概念是可观察对象（Observable），开发者可以将任何JavaScript对象转换为可观察对象，然后通过在对象的属性上添加装饰器或使用观察函数来跟踪属性的变化。当属性的值发生变化时，所有依赖于该属性的组件都会自动更新。
使用MobX可以带来以下优势：
- 简化状态管理：MobX使用响应式编程的思想，使得状态管理变得简单直观。开发者只需要关注数据的变化，而不需要手动更新视图。
- 高性能：MobX使用了细粒度的观察机制，只有在需要时才会更新相关的组件，从而提高了应用程序的性能。
- 可扩展性：MobX提供了丰富的工具和扩展，可以轻松地与其他库和框架集成，满足不同项目的需求。
MobX在前端开发中有广泛的应用场景，特别适用于大型复杂的应用程序。它可以用于管理应用程序的全局状态、表单数据、网络请求等各种数据。同时，MobX也可以与React、Vue等前端框架无缝集成，提供更好的开发体验。
腾讯云提供了云原生应用开发平台Tencent Cloud Native，其中包括了一些与MobX类似的状态管理工具，如Tencent Cloud State Manager。这些工具可以帮助开发者更好地管理应用程序的状态，并提供了一些额外的功能和扩展。
更多关于MobX的信息和使用方法，可以参考腾讯云的官方文档：Tencent Cloud Native - MobX
相关·内容
2回答
问题：是一种反模式，既具有mobx，又进行反应，然后利用它们反应组件状态，以及mobx的@observer @observable？
因为据我所能理解，mobx试图替换反应状态，或者至少做一些非常相似的事情。
浏览 6提问于2016-11-30得票数 3
回答已采纳
我正在尝试学习如何使用带有React的MobX，我不明白为什么使用提供程序或上下文是必要的，如果持有状态的对象从未改变，只更改其内容。
例如，我在store.js中有一个商店(一个随时间变化的简单计时器)：
import { decorate, observable, action } from 'mobx';
import React from 'react';
class TheTimer {
currentTick = 0; // In seconds since start
tick = () => {
this
浏览 1提问于2019-08-21得票数 26
1回答
仅仅使用MobX存储会消除常规有状态组件的功能吗？目前，我正在使用componentDidUpdate访问prevState & prevProps，并根据它们的值调用其他方法。如何在MobX/React MobX存储中访问类似的生命周期方法？
更具体地说，下面是我的一个生命周期函数的当前代码：
componentDidUpdate(prevProps, prevState) {
const currentWidth = this.state.width.window;
const prevWidth = prevState.width.window;
if (
浏览 0提问于2017-04-04得票数 2
在MobX with receipe中，在部分有一个接收程序来响应useEffect钩子中的更改。
import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(
() =>
autorun(() => {
document.title = `${store.title} - ${store.sectionName}`
}),
浏览 16提问于2019-10-09得票数 6
2回答
我不能让我的路由工作，当我点击我的按钮，什么都没有发生。我正在使用
import plannerStore from './PlannerStore';
import { RouterStore } from 'mobx-react-router';
const routingStore = new RouterStore();
const stores = {
plannerStore,
routingStore
}
export default stores;
import React from 'react';
im
浏览 2提问于2017-07-01得票数 1
回答已采纳
2回答
昨晚，我在推特上看到了redux和mobX之间的争论。
我花了几个小时研究mobX。在我看来，redux很棒，Dan是我的偶像。所以我认为redux比mobX更快。
我看到了mobx-react-todomvc。我试着修改它，我发现它只是一层一层地传递道具。这是我的问题吗？
浏览 0提问于2016-06-12得票数 1
1回答
我在学黑帮。我不明白为什么不重新呈现父组件.单击按钮时，观察到的对象中字段的值将发生变化。父组件是一个观察者。为什么没有更新？我做了两个版本:只有mobx和mobx状态树。都不管用。
美孚
import React, { useContext , createContext} from 'react'
import { observer} from 'mobx-react-lite';
import { observable } from 'mobx'
const TestOb = observable({
Name: 'Te
浏览 5提问于2022-08-18得票数 1
回答已采纳
我知道在更小的组件上使用@观察者对性能有好处。在尽可能多的组件上使用@inject也是合理的吗？显然，以这种方式访问使用过的道具比通过父组件更容易。同时，创建表示性组件也变得困难。几乎所有组件都直接连接到Mobx的商店。但是，即使我们不使用@inject，组件仍然可以使用“观察者”。
所以我的问题是：
如何在Mobx中创建表示组件？或者，在Mobx中可能不需要表示组件。
使用@inject的最佳实践是什么？或者哪些组件与@inject一起合理使用？
如有任何建议，敬请见谅。
浏览 2提问于2017-11-19得票数 1
我有一个React表组件，它通过一个名为TableStore的属性获取数据。此属性是获取行数据的高级抽象：
interface TableStore<RowType> {
getRowIds: () => Array<RowId>;
getRow: (rowId: RowId) => RowType | undefined;
}
interface MaterialTableProps<RowType> {
tableStore: TableStore<RowType>;
}
function Materi
浏览 8提问于2019-07-30得票数 1
回答已采纳
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
2回答
在使用Redux或MobX这样的状态管理库时，我还需要使用道具吗？
例如，如果父进程将状态作为道具发送给子进程，那么父进程和子进程都不能简单地导入Redux/MobX存储并通过导入的存储调用对状态的操作吗？
浏览 0提问于2017-10-23得票数 0
我发现了一个非常奇怪的MobX行为，我不知道为什么会发生这种情况。试着用谷歌搜索，但没有发现我所面临的问题。
所以，我有一个非常简单的柜台MobX商店：
import { makeAutoObservable } from "mobx";
class CounterStore {
constructor(initialState) {
this.count = initialState ?? 0;
makeAutoObservable(this);
}
dec = () => this.count--;
inc = () =>
浏览 9提问于2022-05-29得票数 1
回答已采纳
1回答
我只是在学习Mobx，我试图让这个组件在没有运气的情况下进行更新。好像它应该更新，它就是没有。我错过了什么？
'use strict';
const observer = mobxReact.observer;
const makeAutoObservable = mobx.makeAutoObservable;
const isObservable = mobx.isObservable;
const isObservableProp = mobx.isObservableProp;
const configure = mobx.configure;
configure(
浏览 1提问于2020-11-13得票数 2
回答已采纳
在Mobx (mobx- React )中，我们可以在这样的React组件中“注入”存储：
@inject('store')
@observer class Abc extends React.Component {
}
这导致Abc将store作为类似于this.props.store的prop获得。但是inject如何将store映射到实际的商店呢？
浏览 0提问于2018-04-01得票数 1
回答已采纳
我不明白为什么useLocalStore钩子存在。我使用从observable库导入的mobx方法在React组件主体之外声明存储。
然后，以任何方式使用该存储的每个组件都会从observer临时包装到mobx-react中。
一切都很好，但我不确定我是否做错了什么，因为useLocalStore钩子在所有文档中都被使用，我也没有使用它。
在react组件之外声明存储的示例：
import { observable } from 'mobx'
import { observer } from 'mobx-react'
const person = observ
浏览 8提问于2020-05-15得票数 4
回答已采纳
1回答
当我们调用mobx并按以下方式注入和观察组件内部存储时
**ExampleStore.ts**
import { observable, action } from 'mobx';
export class ExampleStore {
@observable
testData1: any = [];
@observable
testData2: any = [];
}
和
export default inject('exampleStore')(observer((props) => {
// Return
浏览 2提问于2020-12-27得票数 1
2回答
假设我有两个React组件Parent和Child，它们都是由Mobx管理的某种状态的@observer。如果子组件在其render方法之外使用了一个observable值，那么父组件的Mobx autorun是否会跟踪该值/observable
谢谢
浏览 3提问于2017-03-22得票数 1
3回答
我正在使用mobx-react将我所有的类组件迁移到函数组件。
我想知道我的所有组件是否应该由observer包装。
我想可能有三种情况。
可观察的状态被调用和使用。
可观察的状态被传递到道具中。
纯无状态组件。
假设以上三个组件都是功能组件。
我应该用mobx-react的observer包装上面的所有组件吗？
( cf)是否有与mobx的@observer装潢师相比的文章或基准？
浏览 1提问于2020-06-18得票数 1
回答已采纳
1回答
我不能在可观察的对象中添加使用@mui/material/ styled样式创建的组件。是否需要进行任何配置来修复此问题？
Uncaught RangeError: Maximum call stack size exceeded
at new ObservableObjectAdministration (mobx.esm.js:4402:42)
at asObservableObject (mobx.esm.js:4829:13)
at asDynamicObservableObject (mobx.esm.js:3267:12)
at Function.o
浏览 31提问于2022-08-03得票数 1
回答已采纳
2回答
我在React Native中使用了MobX，到目前为止我真的做到了轻量级。当Mobx Store中的状态改变时，是否有一些生命周期或方法可以调用函数？
浏览 6提问于2017-11-17得票数 1
我试图将使用set状态的现有应用程序转换为使用Mobx。如何使用mobx实现set状态回调功能。我需要使用componentDidUpdate来实现这个功能吗？
浏览 1提问于2016-11-22得票数 2
回答已采纳
我在最近使用MobX进行国家管理的反应本机项目。我想知道的是，@observable变量是临时的，并且有一个过期时间(在此之后，它们被MobX自删除)。
MobX也可以用于SQLite这样的离线任务吗？
在中使用SQLite和MobX有什么区别？
浏览 0提问于2019-08-16得票数 0
我在文档中读到mobx react提供了一个名为componentWillReact的新生命周期。但是，我的类似乎只对渲染函数中的mobx更改做出反应。当我的商店改变时，componentWillReact永远不会被触发。
我把“下一个”作为道具送下去。此应用程序不使用mobx inject。
import { observer } from 'mobx-react';
@observer class QuickShopNew extends Component {
componentWillReact() {
console.log(this.pr
浏览 2提问于2017-10-18得票数 2
我使用的是MobX @观察者和@with路由器(ReactiveRouter-v4)包装页面组件，如下所示
@withRouter
@inject('stores')
@observer
class Page extends Component {
render() {
return (
<div>
<NavBar />
<Header title={this.props.stores.UIStore.title} />
<Switch>
浏览 8提问于2017-07-07得票数 3
2回答
我正在尝试使用带有Jest的Mobx商店和React测试库来测试我的React组件。
问题是，我对如何为测试注入我的商店没有任何线索。
这是我的简化代码。
StaffInfo.js(component)
import React, { useState } from "react";
import { observer, inject } from "mobx-react";
const StaffInfo = props => {
const store = props.instituteStore;
const [staffs, setS
浏览 2提问于2019-09-30得票数 4
回答已采纳
1回答
从6.0.0版本开始，将mobx-react作为UMD从CDN加载会导致错误。有解决办法吗？
示例
const { observer } = mobxReact;
const App = observer(() => <div>Example</div>);
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/re
浏览 1提问于2020-12-21得票数 0
回答已采纳
1回答
MOBX和反应集成
、、、、
在重新编写客户端应用程序时出现有效的钩子错误.(升级代码)
mobx 6.3.8 mobx反应7.2.1，mobx状态树5.0.5反应17.0.1 RN 0.64.3。
我觉得错误就在这里。我搜索了使用商店的代码行，它让我找到了不推荐的网站.我不知道在哪里可以在站点中找到新的处理方法.这叫什么？
import { createContext, useContext } from "react"
import { RootStore } from "./root-store"
const RootStoreContext = createContext<
浏览 14提问于2022-01-07得票数 0
回答已采纳
2回答
我刚开始尝试mobx-使用商店反应，并想使用一个商店和一个单一的可观察，但甚至不能使这个工作。
使用@observer，我得到了错误Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'。
没有它，值就变成1。
我不知道这里出了什么问题，有什么想法吗？
import {observable} from 'mobx'
import {inject, observer} from 'mobx-rea
浏览 0提问于2018-01-17得票数 0
回答已采纳
我对React和整个古巴都是相当陌生的。
我似乎无法让的FileUpload组件工作。我不知道我做错了什么。
我总是得到以下错误：
Uncaught TypeError: Cannot read property 'getFileUploadURL' of undefined
at FileUploadComponent.render (index.esm.js:362)
at allowStateChanges (mobx.module.js:1146)
at index.module.js:951
at trackDerivedFunctio
浏览 7提问于2020-07-27得票数 0
1回答
我正在尝试将StackNavigator与MobX结合使用。这就是我被困的地方。
index.android.js
import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import DemoStore from './src/stores/DemoStore';
import { StackNavigator } from 'react-navigation';
import PoolListComponent from
浏览 2提问于2017-10-29得票数 0
我正在尝试让MobX与react中的功能组件一起工作。我想在不使用装饰器的情况下做到这一点。我设置了一个带有create-react-app的应用程序，添加了MobX和MobX-react作为依赖项。然而，我似乎不能让观察点在功能组件中工作。
import React from 'react';
import { extendObservable } from 'mobx';
import { observer } from 'mobx-react';
const Test = () => {
extendObservable(t
浏览 0提问于2018-02-01得票数 13
回答已采纳
我很难理解Provider和@inject在mobx-react/native包中的角色。
大多数使用mobx Provider的示例都使用它来提供全局存储。如下所示：
import { Provider as MobXProvider, observer } from 'mobx-react/native';
import myStore from './stores/myStore.js'
@observer
export default class App extends Component{
render() {
return(
浏览 17提问于2018-03-05得票数 2
回答已采纳
我想用mobx把状态带到全局状态。我正努力在莫布克斯建立一个全球性的国家。另外，我想提到我正在使用mobx-react-lite库。
这是到代码框的链接。如果您打开这些命令，您将能够看到它在使用useState之前是如何工作的。
这是我的店
import { observable, action } from "mobx";
export class ProductStore {
@observable categories: string[] = [];
@action
addCategory = (val: string) => {
this.
浏览 7提问于2022-04-16得票数 1
回答已采纳
使用React测试mobx的新手。我正在测试一个简单的侧面导航栏，在汉堡菜单上打开/关闭。我已经为导航栏设置了一个商店：
export class Store {
toggle = false;
setToggle(bool){
this.toggle = bool;
};
};
decorate(Store, {
toggle: observable,
setToggle: action
});
export default createContext(new Store());
下面是导航栏组件：
export default
浏览 7提问于2020-05-09得票数 2
请帮助我解决这个问题:我正在使用mobx-state-tree + React + mobx + Socket.io，我正在为项目编写聊天，并使用socket.io从服务器获取聊天列表，然后使用action将他放到mobx-state-tree存储中，然后我想从mobx-state-tree存储中获取数据，并使用映射函数来呈现元素，但是，我发现了两个错误这是我的聊天enter image description here的mobx-state-tree模型 这是我尝试映射数据enter image description here的代码 这是问题所在 enter image descript
浏览 18提问于2020-07-25得票数 0
回答已采纳
1回答
我遇到了一个问题，如何让react组件具有基于异步获取数据的初始状态。MyComponent从API中获取数据，并通过Mobx action设置其内部data属性。
客户端，调用componentDidMount，然后获取数据，然后设置并正确呈现数据。
import React from 'react';
import { observer } from 'mobx-react';
import { observable, runInAction } from 'mobx';
@observer
export default class MyC
浏览 0提问于2016-12-13得票数 1
回答已采纳
1回答
我曾经使用react + mobx构建应用程序，做商店并将它们传递给提供者，然后注入装饰器。(其中一些应用程序很大，有大量数据、表单、网格……) // store.js
class Store {
@mobx.observable counter = 0;
@mobx.action
increaseCounter = () => {
this.counter++;
}
}
// App.js
class App extends Component {
constructor(props){
super(prop
浏览 8提问于2020-07-08得票数 1
1回答
我并不是真正面对一个问题，我更想知道什么是我应该使用mobx和react的最佳方式。所以我的情况是：
我对mobx相当陌生，但我有多年使用react的经验(主要是使用redux)。我的新项目是将mobx-state-tree与mobx-react-lite一起使用，以便将组件与包装组件的函数observer连接起来。我已经建立了一个根商店，里面有多个商店。我现在对此非常热心，但我想提出一些建议：
我是否应该使用redux中非常常见的容器逻辑，这意味着我应该只连接一个“容器”组件，该组件将处理与我的存储的连接，并将其扩展到其子组件？还是应该直接与观察者连接，因为需要从存储区提供数据的组件很多？
浏览 6提问于2020-02-02得票数 3
回答已采纳
2回答
我使用React，当我用mobx的观察者包装组件时，我得到了这个错误。有什么问题吗？有可能用mobx和吗？
import classnames from 'classnames';
import { observer } from 'mobx-react';
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import ViewStore from '../../../store/ViewStore&#
浏览 1提问于2019-04-17得票数 4
回答已采纳
1回答
无法从mobx提供程序接收存储
、、、、
我使用的是react-router 3，下面是我的路由代码：
export default (
<Route>
<Route path="login" component={LoginPage}/>
<Route path="/" component={App}>
<IndexRoute component={Dashboard}/>
<Route path="dashboard" component={Dashboard}/>
&
浏览 3提问于2017-05-11得票数 0
1回答
当我试图运行我的反应代码时，我得到低于警告，我运行了'npm运行弹出‘和更新package.js使装饰器在反应中工作，它工作很好，但是我在控制台中得到警告。
MobX您还没有配置观察者批处理，这在某些情况下可能会导致意外的行为。参见的更多信息
import { observable, computed, action, when } from 'mobx';
class TodoStore {
@observable todos = [];
@observable filter = "";
}
以上是我的代码，我对mobx和re
浏览 2提问于2020-05-07得票数 3
回答已采纳
当使用MobX和React时，我有两个组件。我从父组件中向子组件发送了一个道具，如下所示：
import { computed } from 'mobx'
import { observer } from 'mobx-react'
@observer
class Parent extends React.Component {
@computed get user() {
const { gamer } = this.props;
}
render () {
return <div><Child user={th
浏览 4提问于2017-08-09得票数 2
在我看来，我希望使用mobx来保存一个名为掩码的状态，当我使用axios时，这个状态将是真的，当我结束调用时，这个状态将是假的，下面是我的代码。
store.tsx
import { makeAutoObservable, runInAction } from 'mobx';
import axios from 'axios';
class Store {
isHeaderShow = false;
isTabBarShow = false;
isShowingMovies = [];
isShowingMovieIds = [];
willShow
浏览 19提问于2022-03-08得票数 1
回答已采纳
1回答
我正在尝试进行一个非常简单的api调用，没有任何逻辑，我在控制台中得到一个名为‘all.Althoough’的难以辨认的对象(也不是预期的)，我不能在render()方法中返回任何东西，它抛出了一个typeError。我的代码： `Store:
import {observable, configure, action,flow, computed, decorate, set, runInAction} from 'mobx';
import {observer, inject} from 'mobx-react'
configure({enforce
浏览 15提问于2020-01-24得票数 0
1回答
我知道MobX可以检测对象属性何时发生变化(在我们的例子中是myData.name)，但是MobX如何知道User组件取决于 myData.name
class MyData {
@observable name = "John"
}
@observer
class User extends Component {
render() {
// here, User depends on myData.name, but how MobX know??
let { name } = this.props.myData;
浏览 0提问于2018-06-12得票数 2
当注册失败时，我想重定向。
我用的是Mobx。
所以这有个问题。
当我搜索重定向时，人们说使用下面的代码。
this.props.history.push("/");
当它在他自己的组件中时，这是有效的。
但在我的例子中，我是在mobx商店的行动内部运行的。
然后，this.props不是路由组件的支柱。
所以我想知道我怎么能读到通过mobx商店的路线的历史。
非常感谢!
// In the mobx store
@action submitSignIn = () => {
axios
.post('auth/join', { em
浏览 0提问于2019-04-11得票数 2
回答已采纳
目前，我正在使用Redux和上述钩子的反应项目。然而，在我看来，useMemo和useCallback很快就会导致错误(棘手的)。据我所知，这些钩子是必需的，以避免不必要的重新呈现组件，因为react是检查引用相等。
我想摆脱上面提到的钩子，让MobX处理所有的反应物。我想知道我是否完全可以摆脱它们(useCallback，useMemo)，因此所有的东西都会自动更新。
MobX是否具有较慢的性能？
甚至有可能用MobX完全摆脱它们吗？
UI组件是否也只能在MobX上中继(例如，为切换模态可见性设置加载布尔值或布尔值)？
另外，我认为useContext不应该用于频繁的更新
浏览 3提问于2020-10-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
