当其他React组件访问存储区时，Mobx状态会丢失 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

2023再谈前端状态管理

要解决的问题状态管理库要解决的问题：从组件树的「任何地方」读取存储的状态写入存储状态的能力提供「优化渲染」的机制提供「优化内存使用」的机制与「并发模式的兼容性」数据的「持久化」「上下文丢失...综上，在系统中跟业务相关、会频繁变动的数据在共享时，应谨慎使用 context。...缺点 Context 只能存储单一值，当数据量大起来时，你可能需要使用createContext创建大量context；直接使用的话，会有一定的性能问题：每一次对state的某个值变更，都会导致其他使用该...React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。...Mobx会在组件挂载时收集依赖，和state建立联系，这个方式在即将到来的react 18的并发模式（Concurrent Mode）中，可能无法平滑地迁移。

7421 0

放弃Redux吧，转投Zustand吧

这个 store 是通过调用 createStore 方法并传入一个包含状态和操作的 object 来创建的。 Zustand 与其他状态管理库如 Redux 和 MobX 相比有什么优势？...Zustand 是一个为 React 应用程序设计的状态管理库，与其他流行的状态管理库如 Redux 和 MobX 相比，它提供了一些独特的优势和特性。...在组件中使用 store 在你的 React 组件中，使用 useStore 钩子来访问和更新 store 中的状态。 import { useStore } from '....}) // 当不再需要监听时，取消订阅 unsubscribe() 清理和销毁 store 在某些情况下，你可能需要清理或销毁 store。...const store = useStore() // 当组件卸载时，清理 store store.destroy() 使用自定义钩子你可以创建自定义钩子来封装 store 的某些操作，使得在组件中使用更加方便

2341 0

您找到你想要的搜索结果了吗？

是的

没有找到

为了学好 React Hooks, 我抄了 Vue Composition API, 真香

在 React Hooks 中，使用 useCallback、useMemo、useEffect 这些 Hooks，都需要手动维护一个数据依赖数组。当这些依赖项变动时，才让缓存失效。...Mobx 有一个库可以用来绑定 React 组件, 它就是 mobx-react-lite, 有了它, 我们可以监听响应式变化并触发组件重新渲染。...如果这样一笔带过，估计很多读者会很扫兴，自己写一个 observer 也不难。我们可以参考 mobx-react 或者 mobx-react-lite 的实现。...它们都将渲染函数放在 track 函数的上下文下，track函数可以跟踪渲染函数依赖了哪些数据，当这些数据变动时，强制进行组件更新: import React, { FC , useRef, useEffect...React 自身的状态更新机制和组件的渲染体系是深度集成。因此我们现在监听响应式数据，然后粗暴地 forceUpdate，会让我们丢失部分 React Concurrent 模式带来的红利。

3K2 0

Facebook 新一代 React 状态管理库 Recoil

Recoil 提出了一个新的状态管理单位 Atom，它是可更新和可订阅的，当一个 Atom 被更新时，每个被订阅的组件都会用新的值来重新渲染。...用 Redux 或 Mobx 不可以吗？因为 React 本身提供的 state 状态在跨组件状态共享上非常苦难，所以我们在开发时一般借助一些其他的库如 Redux、Mobx 来帮助我们管理状态。...并且，它们并不能访问 React 内部的调度程序，而 Recoil 在后台使用 React 本身的状态，在未来还能提供并发模式这样的能力。...上面我们已经提到了 Atom 的概念， Atom 是一种新的状态，但是和传统的 state 不同，它可以被任何组件订阅，当一个 Atom 被更新时，每个被订阅的组件都会用新的值来重新渲染。...这一点很重要，因为选择器可能会执行一次或多次，可能会重新启动并可能会被缓存。异步状态 Recoil 提供了通过数据流图将状态和派生状态映射到 React 组件的方法。

1.6K1 0

Hooks 邂逅 MobX ，代码变得更丝滑了！

还有些朋友想要使用 React Hooks 来重构升级部分业务，或者封装优化一些通用的业务组件，来提升项目的可扩展性，但是却困于不知如何在 Hooks 中继续使用Mobx 这一状态管理库了，使用过程中感觉畏手畏脚奇奇怪怪的...其实吧，Mobx 作为当下炙手可热的状态管理库，很早就推出了 v6 版本，紧跟技术潮流，极大的方便了我们在 Hooks 环境下，更好的对 React 进行状态管理。我想这也是它炙手可热的原因之一吧！...我们先介绍一下这两个 API: 01 useLocalStore Mobx 推荐使用 useLocalStore 来组织组件的状态。...02 useObserver Mobx 使组件响应数据状态的变化主要有以下三种方式： observer HOC Observer Component useObserver Hooks 传统React.Component...如此简单的一步就可以使得这个组件成功的监听数据变化了，当数据变化的时候，组件自动 re-render 当前组件。

1.2K1 0

MobX学习之旅

一、MobX MobX其实是一个比较轻便的可扩展的状态管理工具，是一个由Facebook以及一些其他团队的人共同维护的开源项目。...当应用公共状态的组件在状态发生变化的时候，会自动完成与状态相关的所有事情，例如自动更新View,自动缓存数据，自动通知server等。...MobX官方推荐与React搭配使用，来存储和更新应用状态，所以最好搭配mobx-react中间件使用：原理： 1、React的render是将存储的状态转化为树状结构来渲染组件的方法； Mobx...是用来存储和更新状态的工具； 2、React使用的方法是采用虚拟Dom来进行view视图的缓存，来减少繁琐的Dom更新而Mobx则通过一个虚拟的状态依赖图表来让react组件和应用状态同步化来减少不必要的状态来更新组件的...，当组件重新render的时候会被触发，但在初始渲染前是不会被触发的 onError mobx-react提供的错误钩子函数来收集错误用法： import { onError } from 'mobx-react

1.4K2 0

滴滴前端高频react面试题汇总_2023-02-27

（1）当使用箭头函数作为map等方法的回调函数时，箭头函数的作用域是当前组件的实例化对象（即箭头函数的作用域是定义时的作用域），无须绑定作用域。（2）事件回调函数要绑定组件作用域。...react中key的作用简单的说：key 是虚拟DOM中的一种标识，在更新显示是key起到了极其重要的作用复杂的说：当状态中的数据发生改变的时候，react会根据【新数据】生成【新的虚拟DOM】，随后...mobx更适合数据不复杂的应⽤：mobx难以调试，很多状态⽆法回溯，⾯对复杂度⾼的应⽤时，往往⼒不从⼼。...你对【单一数据源】有什么理解 redux使用 store将程序的整个状态存储在同一个地方，因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能. redux 有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取当一个组件相关数据更新时

1.1K2 0

Mobx与Redux的异同

，在另一个地方修改，在其他地方得到他们更新后的状态。...如今前端通常是要用组件components来构建一个应用，而组件中通常有自己的内部状态即state，但是随着应用越来越膨胀，组件自己内部维护的状态在膨胀的应用中很快会变得混乱。...随着应用功能的不断拓展，通常会出现一些问题: 一个组件通常需要和另一个组件共享状态。一个组件需要改变另一个组件的状态。组件层级太深，需要共享状态时状态要层层传递。...像Redux和Mobx这类状态管理库一般都有附带的工具，例如在React中使用的有react-redux和mobx-react，他们使你的组件能够获得状态，一般情况下，这些组件被叫做容器组件container...在Mobx使用可观察对象，通常是使用observable让数据的变化可以被观察，通过把属性转化成getter/setter来实现，当数据变更时将自动触发监听响应。

8962 0

React组件设计实践总结05 - 状态管理

你不需要复杂的状态管理 Redux Mobx RxJS 其他状态管理方案扩展阅读 ---- 状态管理现在的前端框架，包括 React 的一个核心思想就是数据驱动视图, 即UI = f(state)....当我们需要处理复杂的应用状态，且 React 本身无法满足你时....比如：你需要持久化应用状态, 这样你可以从本地存储或服务器返回数据中恢复应用需要实现撤销重做这些功能实现跨页面的用户协作应用状态很复杂时数据流比较复杂时许多不相关的组件需要共享和更新状态外置状态...这些数据在一些上下文(例如 computed，observer 的包装的 React 组件，reaction)中被访问时可以被收集依赖，当这些数据变动时相关的依赖就会被通知....当数据变动时触发依赖该数据的副作用，其中包含‘视图’。

2.1K3 1

2021前端react面试题汇总

) Derivation（衍生）∶ 从应用状态中派生而出，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain...但是这类方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。...setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新受控组件缺陷：表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都要编写事件处理函数...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9....React.forwardRef是什么？它有什么作用？ React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

1.9K2 0

干货 | 浅谈React数据流管理

在react中，把这种状态定义为state，用来描述该组件对应的当前交互界面，表示当前界面展示的一种状况，react正是通过管理状态来实现对组件的管理，当state发生变更时，react会自动去执行相应的操作...3）如何让状态变得可预知，甚至可回溯？当数据流混乱时，我们一个执行动作可能会触发一系列的setState，我们如何能够让整个数据流变得可“监控”，甚至可以更细致地去控制每一步数据或状态的变更？...1）store：提供了一个全局的store变量，用来存储我们希望从组件内部抽离出去的那些公用的状态； 2）action：提供了一个普通对象，用来记录我们每一次的状态变更，可日志打印与调试回溯，并且这是唯一的途径...那么如何帮助react实现状态管理呢，我们只需要将组件作为事件响应者，然后在next回调里定义好更新组件状态的动作setState，当接收到数据推送时，就会自动触发setState，完成界面更新，这其实有点类似于...； 3）当项目复杂度一般时，小规模团队或开发周期较短、要求快速上线时，建议使用mobx； 4）当项目复杂度较高时，团队规模较大或要求对事件分发处理可监控可回溯时，建议使用redux； 5）当项目复杂度较高

1.8K2 0

实现简版 react 状态管理器 mobx

mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。...，清晰易读渲染性能好，副作用自动执行核心思想状态变化引起的副作用应该被自动触发应用逻辑只需要修改状态数据即可,mobx 回自动渲染 UI，无需人工干预数据变化只会渲染对应的组件mobx 提供机制来存储和更新应用状态供...React 使用react 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染这里配上官网的 mobx 执行流程图图片页面的状态存储在 mobx 中，通过事件触发 mobx 的方法函数，改变状态，...(() => { console.log(o.name)})o.name = 'hello' // 对应一个 autorun图片由上图可知，autorun 默认会执行一次，当监听的对象的属性改变时，会自动触发...用过 vue3 的朋友应该了解，effect 函数也是和内部的属性进行关联的，我们可以定义一个全局变量存储，当执行 autorun 的函数时，对该变量进行赋值，同时我们可以通过拦截的 get 方法对属性和全局的值进行关联

1.4K3 0

React-全局状态管理的群魔乱舞

全局状态管理库需要解决的问题 ❝ 从组件树的「任何地方」读取存储的状态写入存储状态的能力提供「优化渲染」的机制提供「优化内存使用」的机制与「并发模式的兼容性」数据的「持久化」「上下文丢失」问题...在实践中，当涉及到实际「状态存储」时，有两种主要方法。 ❝第一种是「由React自身维护」。...特别是当用户从低配设备上访问这些大型应用程序时，数据增大，设备无法及时进行数据回收，就导致了应用卡顿等性能问题。利用React「生命周期」来存储状态意味着更容易利用组件卸载时的「自动垃圾收集」。...同样，使用一个在React之外的状态管理库存储数据，意味着它不与任何特定的组件绑定，可能需要手动管理。其他问题除了上面的基础问题外，在与React集成时还有一些其他的常见问题需要考虑。...与大型单体存储相比，较小的独立存储的好处是，当所有订阅的组件卸载时，它们可以自动收集垃圾。而大型单体存储如果没有适当的内存管理，则更容易出现内存泄漏。

3.7K2 0

2021前端react面试题汇总

) Derivation（衍生）∶ 从应用状态中派生而出，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain...但是这类方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。...setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新受控组件缺陷：表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都要编写事件处理函数...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9....React.forwardRef是什么？它有什么作用？ React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

2.3K0 0

MobX or Redux?

1、组件之间复用状态非常困难 React 本身没有提供将可复用性状态“附加”到组件的途径（例如，把组件连接到 Store）。...如果你使用过 React 一段时间，你也许会熟悉一些解决此类问题的方案，比如 Props 和 HOC。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。...写下这片博客的时候，React 已提供 Hook，但是本人觉得这都是些 hack 方案。 2、复杂组件变得难以理解我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。...维护应用状态并支持访问状态(getState())； 3.2. 支持监听 Action 的分发，更新状态(dispatch(action))； 3.3....）也不例外，而为了不将业务或数据相关的任务混入 React 组件中，就需要使用其他框架配合管理异步任务流程，如 redux-thunk、redux-saga、redux-promise 5、数据流向 [

5210 0

常见react面试题

触发，异步任务（通常都是业务或获取数据任务）也不例外，而为了不将业务或数据相关的任务混入React组件中，就需要使用其他框架配合管理异步任务流程，如redux-thunk，redux-saga等; Mobx...（衍生）∶ 从应用状态中派生而出，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain object保存数据...组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期方法 should ComponentUpdate中，允许选择退出某些组件（和它们的子组件）的和解过程。...当一个组件中的状态改变时，React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。...最典型的应用场景：当父组件具有overflow: hidden或者z-index的样式设置时，组件有可能被其他元素遮挡，这时就可以考虑要不要使用Portal使组件的挂载脱离父组件。

3K4 0

2022前端社招React面试题附答案

) Derivation（衍生）∶ 从应用状态中派生而出，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain...但是这类方案需要重新组织组件结构，这可能会很麻烦，并且会使代码难以理解。由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。...setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新受控组件缺陷：表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都要编写事件处理函数...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。...当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9. React组件的构造函数有什么作用？它是必须的吗？

1.7K4 0

React性能测量和分析

工具其他工具变动检测 props 变动检测 mobx 变动检测 Context 变更检测 React Devtool 的 Interactions 扩展下面本文测试的样板代码....所以现在我们给 ListItem 加上 React.memo(查看 PureList 示例) 效果非常明显，现在只有递增的 ListItem 会被更新，而且当数组排序时只有 List 组件会被刷新....Ranked 图可以直观感受到不同颜色之间的意义 4️⃣ 当前选中组件或者 Commit 的详情, 可以查看该组件渲染时的 props 和 state 双击具体组件可以详细比对每一次 commit...下一步操作就是找出组件重新渲染的元凶, 检测为什么组件进行了更新. 我们先假设我们的组件是一个’纯组件‘，也就是说我们认为只有组件依赖的状态变更时，组件才会重新渲染....如果访问了 mobx 传进来的响应式数据，就会建立一个状态依赖关系，这个相对于 props 和 context 来说是隐式的，检测它的变动我们可能需要利用 mobx 提供的一些工具 Context。

2.3K1 0

字节前端面试被问到的react问题

当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。...面试题详细解答redux 有什么缺点一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render...，异步任务（通常都是业务或获取数据任务）也不例外，而为了不将业务或数据相关的任务混入React组件中，就需要使用其他框架配合管理异步任务流程，如redux-thunk，redux-saga等;Mobx是一个透明函数响应式编程的状态管理库...，且没有任何其他影响的数据对比总结：redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中redux使用plain object保存数据，需要手动处理变化后的操作;mobx...当state改变时，组件通过重新渲染来响应：// 正确做法This.setState({message: ‘Hello World’});react16版本的reconciliation阶段和commit

2.1K2 0

在使用Redux前你需要知道关于React的8件事

就能扩展你的状态管理.当更多的组件需要用到特定的State时,可以往上提取State,直到需要访问该State的组件的公共组件.此外,本地状态管理依然保持着可维护性,因为一个组件根据自身需求管理尽可能多的状态...这也同样适用于其他状态管理库,如MobX.在这些库中使用了高阶组件来处理状态管理层和视图层的连接....通常在使用复杂的状态管理工具库时,例如Redux和MobX,你需要将状态管理层粘合到React的视图层上.这也是为什么你需要了解React高阶组件的原因.这其中的粘合层允许你访问State并进行修改,而...当然这也并不意味着在使用Redux一类的库时你需要自己处理React Context上下文.这类工具库已经为你提供了解决方案,使所有组件都可以访问状态容器.当你的状态可以在不同的组件中访问而不必担心状态容器来自哪里的时后...在你决定使用它们之前,请确保你清楚了解本文中解释的有关React的内容.你应该对能坦然面对在仅使用React的情况下进行本地状态管理,还能了解各种React的概念并扩展你的状态管理.此外,确保在你的应用在未来会变得更加庞大时

1.2K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭