开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

具有mobx store的可重用子组件，我是否应该引用父store到子store？

具有mobx store的可重用子组件，是否应该引用父store到子store，取决于具体的业务需求和设计架构。下面是一些考虑因素：

单一数据源原则：mobx鼓励使用单一数据源的原则，即所有的状态都应该集中存储在一个store中。如果父组件的store已经包含了子组件所需的所有状态，那么子组件可以直接引用父store，遵循单一数据源原则。
组件的独立性：如果子组件是一个可重用的组件，它可能在不同的上下文中使用，而这些上下文可能具有不同的数据需求。在这种情况下，子组件应该保持独立性，不应该直接引用父store。相反，父组件可以通过props将必要的数据传递给子组件。
组件的复杂性：如果子组件非常简单，并且只需要访问父组件store中的一小部分状态，那么直接引用父store可能是合理的。但是，如果子组件需要访问大量的状态或者需要执行复杂的数据操作，那么将父store引用到子store可能更好，以保持代码的可维护性和可测试性。

总结来说，是否应该引用父store到子store取决于组件的独立性、复杂性和数据需求。在设计时，需要综合考虑这些因素，并根据具体情况做出决策。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发：https://cloud.tencent.com/product/mobdev
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBCAS）：https://cloud.tencent.com/product/tbcs
腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React下ECharts的数据驱动探索

因此不需要把所有状态都集中到一起，我为每一个页面单独配置一个mobx驱动store，这样逻辑更加简洁，将来也能充分扩展数据流向.png 这就是我最后的技术选项，通过mobx...提供对数据的驱动，父组件直接引用mobx配置的store实例，store中的数据发生变化时父组件就能自动更新视图。...尽管mobx传递给父组件的数据变化了，子组件接收的数据却没有发生变化。...后者我们希望在子组件的生命周期里完成，因此必须要让子组件感知到数据的变化。...不得不说 Vue真香源码 Echarts基类父组件 mobx装饰的Store

1.1K4 0

Vue常见面试题汇总

可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。独立开发。...对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object...1.父组件与子组件传值 //父组件通过标签上面定义传值 //引入子组件...exprot default{ name:"parent", data(){ return { data:"我要向子组件传递数据...name:"son", //接受父组件传值 props:["obj"] } 2.子组件向父组件传递数据 //子组件通过$emit方法传递参数

1.3K1 0

Mobx与Redux的异同

描述 Redux作者说过，如果你不知道是否需要Redux，那就是不需要。在判断是否需要使用Mobx与Redux之前，我们首先需要知道他们究竟是要解决什么问题，以及当前是否遇到了这个问题。...子组件更新一个状态，可能有多个父组件，兄弟组件共用，实现困难。这种情况下继续使用提取状态到父组件的方法你会发现很复杂，而且随着组件增多，嵌套层级加深，这个复杂度也越来越高。...对于Mobx与Redux的异同这个问题，是我最近在找实习的时候遇到的，分别为react mobx与react redux作简单的示例，文中的示例代码都在https://codesandbox.io/s/...MobX背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得，其中包括UI、数据序列化等等，核心重点就是: MobX通过响应式编程实现简单高效，可扩展的状态管理。...或许有人需要减少编写的代码行数，那么就可能会提到Redux有太多的样板代码，而应该使用Mobx，可以减少xxx行代码。

9342 0

常见react面试题

React组件命名推荐的方式是哪个？通过引用而不是使用来命名组件displayName。...和解的最终目标是根据新的状态，以最有效的方式更新用户界面。如果我们知道用户界面的某一部分不会改变，那么没有理由让 React弄清楚它是否应该更新渲染。...尤其是高并发访问的情况，会大量占用服务端CPU资源; 2）开发条件受限在服务端渲染中，只会执行到componentDidMount之前的生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，...对React的插槽(Portals)的理解，如何使用，有哪些使用场景 React 官方对 Portals 的定义： Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 Portals...最典型的应用场景：当父组件具有overflow: hidden或者z-index的样式设置时，组件有可能被其他元素遮挡，这时就可以考虑要不要使用Portal使组件的挂载脱离父组件。

3K4 0

2023年了，我还是选择 MobX

继承性：面向对象编程提供了继承的机制，通过继承，子类可以继承父类的属性和方法，并在此基础上进行扩展和修改。这种继承的机制可以避免代码重复，提高代码的可重用性和可维护性。...代码复用：面向对象编程提供了模块化的机制，可以将代码分解成多个模块，实现代码的复用和重构。这种模块化的机制可以使得代码更加易于管理和维护，提高了代码的可重用性和可维护性这是一个教科书式的回答。...总的来说，在抽象能力上，面向对象和函数式编程都具有其独特的优势，可以根据具体的应用场景选择适合的编程范式。又一个教科书式的回答，谁都不得罪，请收下我的膝盖！...可不变数据通常只需要全等比较(===) 就可以判断是否变更。而可变数据引用可能是固定的。 —— 可镜像。...应用到视图接下来我们讨论如何将我们的 Store 注入到视图，以及这些 Store 对象生命周期的管理。注入视图层视图注入有两种方式。

4543 0

高频React面试题及详解

框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。...React组件间通信方式: 父组件向子组件通讯: 父组件可以向子组件通过传 props 的方式，向子组件进行通讯子组件向父组件通讯: props+回调的方式,父组件向子组件传递props进行通讯，此props...为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中兄弟组件通信: 找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信跨层级通信...获取Provider中的store，通过store.getState()获取整个store tree 上所有state 包装原组件: 将state和action通过props的方式传入到原组件内部wrapWithConnect...state状态进行比较,从而确定是否调用this.setState()方法触发Connect及其子组件的重新渲染 redux与mobx的区别?

2.4K4 0

前端react面试题指北

不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。...什么是 Props Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。...)); o 支持订阅store的变更(subscribe(listener)); 异步流∶ 由于Redux所有对store状态的变更，都应该通过action触发，异步任务（通常都是业务或获取数据任务...，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain object保存数据，需要手动处理变化后的操作;mobx...只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render （2）重新渲染 render 会做些什么?

2.5K3 0

TS+React+Router+Mobx+Koa打造全栈应用

有两个作用，一个是让你能够在调用时this.props.history得到正确的推导，一个是声明了这个component需要接收到的父组件传递的参数。...注入到实例有两种方法注入到实例一种是通过mobx-react提供的组件包裹，这种方法将会把store注入到...中，类似上文提到的方式，子组件再获取。...在使用mobx的时候我不太能确定哪些地方重新进行了渲染，准确的说我不知道应该在哪些地方添加@observer修饰。我不太喜欢这种不能掌握变化的感觉，当然也可能是我对virtualDOM了解不够。...而相关的文档我没能在react中找到，因此又统一建事件监听器绑定到了他们的父组件上 Github 以上都是我瞎编的

1.8K7 0

数据流管理方案 | Redux 和 MobX 哪个更好？

真正的前端开发，不仅仅要面试造火箭，实际工作中依然需要这样的能力。数据流管理方案有哪些？基于 props 的单向数据流父->子组件通信原理讲解：这是最常见、也是最好解决的一个通信场景。...React 的数据流是单向的，父组件可以直接将 this.props 传入子组件，实现父-子间的通信。 ?...子->父组件通信考虑到 props 是单向的，子组件并不能直接将自己的数据塞给父组件，但 props 的形式也可以是多样的。...假如父组件传递给子组件的是一个绑定了自身上下文的函数，那么子组件在调用该函数时，就可以将想要交给父组件的数据以函数入参的形式给出去，以此来间接地实现数据从子组件到父组件的流动。 ?...兄弟组件通信兄弟组件之间共享了同一个父组件，如下图所示，这是一个非常重要的先决条件。 ? ? 在上面的组件间通信中，直接兄弟间的通信需要借助父级组件实现。

2K2 1

react 的数据管理方案：redux 还是 mobx？

) } } export default App; 使用 mobx 时，借鉴了 redux 架构的优点：单一数据源，这样避免了子组件...、父组件状态同步的问题可以做到让组件无状态化使用 Provider 注入，让 store actions 可以在子组件中，通过 props 访问使用下面是一些不同点： mobx 使用的是 @inject...mobx 在大项目中的扩展能力 redux 方案，本质上还是通过添加更多的 switch 语句来实现扩展，将 store 分支节点的 reducer 分散到不同的文件，再通过工具函数combineReducers...mobx 方案的扩展非常简单，需要扩展 store 和 actions。并且，actions 和 store 的扩展方式完全一致，通过给父类添加成员： ? ?...结论为了不加班，我站 mobx 这边。参考 Mobx 思想的实现原理

2.1K1 1

react 的数据管理方案：redux 还是 mobx？

) } } export default App; 使用 mobx 时，借鉴了 redux 架构的优点：单一数据源，这样避免了子组件...、父组件状态同步的问题可以做到让组件无状态化使用 Provider 注入，让 store actions 可以在子组件中，通过 props 访问使用下面是一些不同点： mobx 使用的是 @inject...mobx 在大项目中的扩展能力 redux 方案，本质上还是通过添加更多的 switch 语句来实现扩展，将 store 分支节点的 reducer 分散到不同的文件，再通过工具函数combineReducers...mobx 方案的扩展非常简单，需要扩展 store 和 actions。并且，actions 和 store 的扩展方式完全一致，通过给父类添加成员： ? ?...结论为了不加班，我站 mobx 这边。参考 Mobx 思想的实现原理

1.9K7 0

2021前端react面试题汇总

，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain object保存数据，需要手动处理变化后的操作;mobx...提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变...和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染 5....React Hooks 主要解决了以下问题：（1）在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）解决此类问题可以使用 render...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9.

2K2 0

2021前端react面试题汇总

，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain object保存数据，需要手动处理变化后的操作;mobx...适用observable保存数据，数据变化后自动处理响应的操作 redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改...提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变...和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染 5....当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9.

2.3K0 0

面试中Vue被问的最多的题目是哪些？

2、可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。 3、独立开发。...1、父组件与子组件传值父组件与子组件传值（父组件通过标签上面定义传值） ...exprot default{ name:"parent", data(){ return { data:"我要向子组件传递数据...name:"son", //接受父组件传值 props:["obj"] } 2、子组件向父组件传递数据 //子组件通过$emit方法传递参数...,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统， vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了

1.5K2 0

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

，且没有任何其他影响的数据对比总结： redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中 redux使用plain object保存数据，需要手动处理变化后的操作;mobx...提交对应的请求到Store中对应的mutation函数->store改变（vue检测到数据变化自动渲染）通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变...和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染 5....React Hooks 主要解决了以下问题：（1）在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）解决此类问题可以使用 render...当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。 9. React组件的构造函数有什么作用？它是必须的吗？

1.7K4 0

React 原理问题

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。 ReactDOM.createPortal(child, container) 10....父组件向子组件通信: 通过 props 传递子组件向父组件通信: 主动调用通过 props 传过来的方法，并将想要传递的信息，作为参数，传递到父组件的作用域中跨层级通信: 使用 react 自带的Context...使用 Redux 或者 Mobx 等状态管理库使用订阅发布模式 11. React 父组件如何调用子组件中的方法？...redux是将整个应用状态存储到一个地方成为store, 里面保存着一个状态树store three, 组件可以派发（dispatch）行为（action）给store, 组件内部通过订阅store中的状态...对store管理不同 Redux将所有共享的数据集中在一个大的store中，统一管理 Mobx按模块将状态划出多个独立的store进行管理 3.

2.5K0 0

【转】Mobx React 最佳实践

stores 代表着UI状态永远记住，你的stores代表着你的UI状态，这就意味着，当你将你的stores储存下来后，就算你关了网页，再次打开，载入这个stores，你得到的网页也应该是相同的。...虽然stores并不是一个本地数据库的角色，但是他依然存储着一些类似于按钮是否可见，input里面的内容之类的UI状态。...最好就把业务逻辑放在stores的方法里面，从组件里面调用。避免使用全局的store实例请尽量避免使用全局的store实例，因为这样你很难写出有条理而可靠的组件测试。...时刻记得在组件声明 @observer 在每个组件声明的时候使用@observer来更新组件的状态。不然在嵌套组件里面，子组件没有声明的话，每次状态更新涉及到的都是父组件级的重新渲染。...所以尽量使用store来储存所有的UI状态，这样store的属性就是你的界面所得。倾向于编写可控组件多编写可控组件，这样会大大降低你的测试复杂度，也让你的组件易于管理。

1.4K1 0

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

（2）父组件传递给子组件方法的作用域是父组件实例化对象，无法改变。（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。...两者对⽐： redux将数据保存在单⼀的store中，mobx将数据保存在分散的多个store中 redux使⽤plain object保存数据，需要⼿动处理变化后的操作；mobx适⽤observable...只要父组件重新渲染了，即使传入子组件的 props 未发生变化，那么子组件也会重新渲染，进而触发 render （2）重新渲染 render 会做些什么?...来减少因父组件更新而触发子组件的 render，从而达到目的。...，通过this.props获取旧的属性，通过nextProps获取新的props，对比两次props是否相同，从而更新子组件自己的state。

1.2K2 0

React+Mobx写法更像Vue了

之后我们实例化一个对象，叫做newState，之后在我的React组件中，我只需要用@observer修饰一下组件类，便可以愉悦地使用这个newState对象中的值和函数了。...然后把state和这个函数分别传到两个子组件里，在逻辑简单，且子组件很少的时候可能还好，但当业务复杂起来后，这么写就非常繁琐，且难以维护。而用Mobx就可以很好地解决这个问题。...之后只要在父组件需要的地方实例化一个MyState对象，需要用到数据的子组件，只需要将这个实例化的对象通过props传下去就好了。那如果组件树比较深怎么办呢？...我们可以借助React15版本的新特性context来完成。它可以将父组件中的值传递到任意层级深度的子组件中。...考虑到ES5中原生数组对象中存在一定的限制，所以Mobx将会创建一个类数组对象来代替原始数组。

1.6K2 0

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

页面组件的reducer和saga都会按需注入到根store selectors.js # ?...状态是否会被多个组件或者跨页面共享？ Redux Store 是一个全局状态存储器，既然使用 Redux 了，有理由让 Redux 来管理跨越多组件的状态状态是否需要被镜像化?...如果你的应用要做‘时间旅行(撤销/重做)’或者应用持久化，这个状态需要被恢复，那么应该放到 Redux Store，集中化管理数据是 Redux 的强项状态是否需要跨越组件的生命周期？...将状态放在组件局部，就会跟着组件一起被销毁。如果希望状态跨越组件的生命周期，应该放到父组件或者 Redux Store 中....比如当一个数据变更涉及到 Mobx 的多个 Store，可以体现出 Redux 的方式更加优雅，数据流更加清晰.

2.1K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭