开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React-Redux :在父更改中的mapStateToProps上重新渲染子组件不起作用

React-Redux是一个用于在React应用中管理状态的库。它结合了React和Redux，提供了一种可预测、可维护和可扩展的状态管理解决方案。

在React-Redux中，通过使用connect函数将React组件连接到Redux的store。connect函数接受两个参数：mapStateToProps和mapDispatchToProps。其中，mapStateToProps是一个函数，用于将store中的状态映射到组件的props上；mapDispatchToProps是一个函数或对象，用于将action创建函数映射到组件的props上。

当父组件中的mapStateToProps发生变化时，React-Redux会检测到这个变化，并重新渲染子组件。但是，如果在父组件中的mapStateToProps中的返回值没有发生变化，React-Redux会认为子组件的props没有变化，从而不会重新渲染子组件。

这种情况下，可能有以下几个原因导致子组件不重新渲染：

mapStateToProps返回的对象或数组没有发生变化：React-Redux使用浅比较来检测props是否发生变化，如果返回的对象或数组没有发生引用变化，即使其中的值发生了变化，子组件也不会重新渲染。解决方法是确保返回的对象或数组是一个新的引用。
父组件没有重新渲染：如果父组件没有重新渲染，那么子组件也不会重新渲染。可以检查父组件的shouldComponentUpdate方法或React.memo来确保父组件的重新渲染。
子组件的shouldComponentUpdate或React.memo阻止了重新渲染：如果子组件中的shouldComponentUpdate方法返回false，或者使用了React.memo并且props没有发生变化，那么子组件不会重新渲染。可以检查子组件的shouldComponentUpdate方法或React.memo的使用。

总结起来，如果在父组件中的mapStateToProps上重新渲染子组件不起作用，可以检查返回的对象或数组是否发生了引用变化，确保父组件重新渲染，以及检查子组件的shouldComponentUpdate方法或React.memo的使用。

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

腾讯云官网：https://cloud.tencent.com/
云服务器CVM：https://cloud.tencent.com/product/cvm
云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎TKE：https://cloud.tencent.com/product/tke
人工智能平台AI Lab：https://cloud.tencent.com/product/ailab
物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
移动开发平台MPS：https://cloud.tencent.com/product/mps
云存储COS：https://cloud.tencent.com/product/cos
区块链服务BCS：https://cloud.tencent.com/product/bcs
元宇宙服务：https://cloud.tencent.com/product/metaspace

相关搜索:React JSX:父组件的重新渲染重新挂载子组件正常吗？React函数组件的父状态更改不会重新渲染子组件 React用于更改父组件从子组件的状态而不重新渲染所有子组件的最佳实践？VueJS -在渲染子组件之前等待父组件中的更新()在React中，我如何知道哪个父组件渲染子组件？在react本机中渲染子组件而不是父组件在svelte中重新渲染子组件在不重新渲染子组件的情况下反应父组件的setState 在父组件上无限角度重新渲染如何从带有钩子的子组件重新渲染父组件？

相关搜索:

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

有帮助

没帮助

相关·内容

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: { echartStyle: { type: Object, default() {...opinionData:{ handler(newValue,oldValue){ this.getChange(); }, deep:true } }, 2 在父组件中用...$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染）这个方法感觉props...’接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性...$refs.pieChart.getChange(); } }, 3 在子组件上使用 v-if =”flag” （谢谢各位老哥的建议）初始flag:true 修改data时 changData(

2.6K3 0

手写一个React-Redux，玩转React的Context API

但是下面还想讲一下React-Redux是怎么保证组件的更新顺序的，因为源码中很多代码都是在处理这个。...在父->子这种单向数据流中，如果他们的一个公用变量变化了，肯定是父组件先更新，然后参数传给子组件再更新，但是在Redux里，数据变成了Redux -> 父，Redux -> 子，父与子完全可以根据Redux...connect在判断是否变化的时候使用的是浅比较，也就是只比较一层，所以在mapStateToProps和mapDispatchToProps中不要反回多层嵌套的对象。...为了解决父组件和子组件各自独立依赖Redux，破坏了React的父级->子级的更新流程，React-Redux使用Subscription类自己管理了一套通知流程。...只有连接到Redux最顶级的组件才会直接注册到Redux store，其他子组件都会注册到最近父组件的subscription实例上。

3.7K2 1

vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读： 1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时，使用了...$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中...父组件广播事件 import popup from "@/components

5.6K4 0

Taro中的一个父组件中map渲染子组件列表的时候，问题

其实问题还是自己想偷懒而且不注意导致的，可以说是小程序页面和组件的界限我们在开发的时候，组件和页面一定要分开，如果是组件的话，就一定不要当成页面组件在pages中配置，就拿列表组件来说场景：我一个列表...这样就导致了首次渲染数据空白！！！！...但是在开发者工具看的时候，其实数据已经是有的，百思不得其解啊，于是就放弃了，差不多首次就是这样 image.png 可以看到，appData中数据是正常的，但是第一次的map展示就是有问题，值出不来，...就是简单的react 列表渲染一个子组件 image.png 于是.......过了十天我还是放不下！...【灵机一动，会不会是小程序中页面和组件之间的边界出了问题呢】我就去掉了 image.png

2K2 0

「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）

state 的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux 源码的奥妙所在。...在正式分析之前我们不妨来想几个问题: 1 为什么要在 root 根组件上使用 react-redux 的 Provider 组件包裹？...用于监视react devtools中不必要的重新渲染。...hoistStatics库把子组件WrappedComponent的静态方法/属性，继承到父组件Connect上。...2 控制组件渲染，渲染节流。 react-redux源码中，通过 useMemo来控制业务组件是否渲染。

2.3K4 0

React总结概括

setState会自动调用render函数，触发视图的重新渲染，如果仅仅只是state数据的变化而没有调用setState，并不会触发更新。...在这种假设之上进行逐层的比较，如果发现对应的节点是不同的，那就直接删除旧的节点以及它所包含的所有子节点然后替换成新的节点。如果是相同的节点，则只进行属性的更改。...constructor是构造器，在实例化对象时调用，super调用了父类的constructor创造了父类的实例对象this，然后用子类的构造函数进行修改。...触发render函数重新渲染dom。...解决通信问题的方法很多，如果只是父子级关系，父级可以将一个回调函数当作属性传递给子级，子级可以直接调用函数从而和父级通信。

1.1K2 0

React-Redux 源码分析（三） -- connect

在第一篇文章的时候说过，connect这个函数其实最终会返回一个包着渲染组件的高阶组件。..., // 组件不重新渲染 return mergedProps } return function pureFinalPropsSelector(nextState, nextOwnProps...是这样的，每个Connect组件里面都有一个subscription对象，它也是一个订阅模型 // 每个父的Connect订阅的是子Connect组件的onStateChange函数，...当然是store(redux)啦，即流程为 // dispathc(action）---触发store的订阅即父的onStateChange---父的onStateChange触发即触发子...Object.assign将子组件中的 static 方法复制进父组件，但不会覆盖组件中的关键字方法(如 componentDidMount)。

1K1 0

React-Redux 源码分析（三） -- connect

在第一篇文章的时候说过，connect这个函数其实最终会返回一个包着渲染组件的高阶组件。..., // 组件不重新渲染 return mergedProps } return function pureFinalPropsSelector(nextState, nextOwnProps...是这样的，每个Connect组件里面都有一个subscription对象，它也是一个订阅模型 // 每个父的Connect订阅的是子Connect组件的onStateChange函数，...当然是store(redux)啦，即流程为 // dispathc(action）---触发store的订阅即父的onStateChange---父的onStateChange触发即触发子...Object.assign将子组件中的 static 方法复制进父组件，但不会覆盖组件中的关键字方法(如 componentDidMount)。

9125 0

实现redux

React里父子组件可以通过props通信，兄弟组件通信需要把数据传递给父组件，再由父组件传递给另一个子组件。以兄弟组件通信为需求，写一个Redux。问题 ?...兄弟组件通信首先分析这个需求，点击button，改变数字，Number组件重新渲染。 ? 可抽象为，派发一个动作，改变状态，执行方法。 ?...上面代码里可以看出组件里的许多代码是重复的，可以进一步抽象组件，最后抽象成React-Redux。...React-Redux里要实现一个外层组件，负责传递store和渲染子组件，功能比较简单 export default class Provider extends Component { static...高阶组件负责把store上的state和dispatch作为props传递给需要渲染的组件，还有实现生命周期函数里的公共功能。

7182 0

react-redux入门教程

最近这段时间在重新回顾上个暑假学的内容，很多内容因为用的比较少就给忘掉了，想着就谢谢博客帮助自己复习一下。...React-Redux的起源 React实际上只是UI框架，通过 JSX 生成动态 dom 渲染 UI，没有架构、没有模板、没有设计模式、没有路由、也没有数据管理。...) } } 上面代码中，mapStateToProps是一个函数，它接受state作为参数，返回一个对象。...Store，每当state更新的时候，就会自动执行，重新计算UI组件的参数，从而触发UI组件的重新渲染。...Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

1.2K3 0

react-redux 开发实践与学习分享

基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。...在各大框架中均可使用，当然各个框架也有自己再度封装的状态管理库，如angular的ngrx，vue的vuex，而本文主要介绍的是react的react-redux。示例介绍 ?...通过路由进入主页面，主页面渲染的dom代码为： render() { // 这个组件是一个包裹组件，所有的路由跳转的页面都会以this.props.children的形式加载到本组件下...在mapStateToProps这个取值函数中，取的也就是相关reducer中返回的值。触发相关action后的主页控制台： ?...至此，就完成了react-redux对于父子组件的通信，由子组件向上推送信息至父组件，触发相关的操作。

8863 0

Redux 入门教程（三）：React-Redux 的用法

) } } 上面代码中，mapStateToProps是一个函数，它接受state作为参数，返回一个对象。...Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。...，也会引发 UI 组件重新渲染。...Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。...然后，子组件就可以从context拿到store，代码大致如下。

1.6K5 0

React 进阶 - React Redux

，那么会将 Redux state 中的数据，映射到当前组件的 props 中，子组件可以使用消费当需要的 state ，有变化的时候，会通知当前组件更新，重新渲染视图可以利用 connect 提供的功能...)(Index) 通过 mapStateToProps 获取指定 state 中的内容，然后渲染视图 # React-Redux 实现组件通信 function ComponentA({ toCompB...中一方面用来订阅来自 state 变化，另一方面通知对应的组件更新在 Provider 中的订阅器 subscription 为根订阅器在 Provider 的 useEffect 中，进行真正的绑定订阅功能...中的订阅器是最根部的订阅器，可以通过 trySubscribe 和 addNestedSub 方法可以看到如果父组件是一个 connect ，子孙组件也有 connect ，那么父子 connect...的 Subscription 也会建立起父子关系上订下发在调用 trySubscribe 的时候，能够看到订阅器会和上一级的订阅器通过 addNestedSub 建立起关联当 store 中

9001 0

父组件中vuex方法更新state，子组件不能及时更新并渲染的解决方法

场景：我实际用到的是这样的，我父组件引用子组件related,父组件调用获取页面详情的方法，更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件...，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容。...我的解决办法：父组件像子组件传值，当父组件执行了获取页面详情的方法之后，state值related更新，然后传给子组件，子组件再进行渲染，可以正常获取到。...父组件代码： <router-link to="/" slot=...$refs.hotComment.height; console.log(this.hotCommentScrollTop); }, } } 子组件related.vue

2.2K4 0

在 Vue 中，子组件为何不可以修改父组件传递的 Prop

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。...这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。...在initProps的时候，在defineReactive时通过判断是否在开发环境，如果是开发环境，会在触发set的时候判断是否此key是否处于updatingChildren中被修改，如果不是，说明此修改来自子组件...需要特别注意的是，当你从子组件修改的prop属于基础类型时会触发提示。这种情况下，你是无法修改父组件的数据源的，因为基础类型赋值时是值拷贝。...你直接将另一个非基础类型（Object, array）赋值到此key时也会触发提示(但实际上不会影响父组件的数据源)，当你修改object的属性时不会触发提示，并且会修改父组件数据源的数据。

2.3K1 0

Redux with Hooks

于是本人把技术项目的react和react-dom升级到了16.8.6版本，并按官方建议，渐进式地在新组件中尝试Hooks。...props; useEffect(() => { // 请求表单数据 queryFormData(formId); }, // 指定依赖，防止组件重新渲染时重复请求...就只会在组件第一次渲染后调用传入的方法，起到类似componentDidMount的效果。...然而正如前文提到的，mapStateToProps中的ownProps参数同样会引起mapStateToProps的重新调用，产生新的state props： // 此函数在connected组件接收到...和派发actions的dispatch函数注入到被Provider包裹的所有子元素中，再配合useReducer，看起来确实是个穷人版的Redux。

3.3K6 0

React进阶(6)-react-redux的使用

前言撰文:川川您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...等),使用它可以更好的组织和管理我们的代码,遵循一定的组件拆分规范,在React中更方便的使用Redux 关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己...这样react中任何组件都可以通过context获取store 只要被这个 Provider组件包裹了,那么它内部的子组件就有能力接收到store，内部的组件都有能力获取store的数据的这样也就意味着我们可以在任何一个组件里利用...综归来说, connect做了两件事情: 把store上的状态转换为内层的UI组件(傻瓜组件)的props 把内层UI组件(无状态组件)中的用户触发的动作转化为派送个store的动作,前者(mapStateToProps...mapStateToProps会订阅 Store，每当 state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

2K1 0

前端面试指南之React篇（一）

组件之间传值父组件给子组件传值在父组件中用标签属性的=形式传值在子组件中使用props来获取值子组件给父组件传值在组件中传递一个函数在子组件中用props来获取传递的函数，然后执行该函数...在执行函数的时候把需要传递的值当成函数的实参进行传递兄弟组件之间传值利用父组件先把数据通过【子组件】===》【父组件】然后在数据通过【父组件】===〉【子组件】消息订阅使用PubSubJs...mapStateToProps（state，ownProps）中带有两个参数，含义是∶state-store管理的全局状态对象，所有都组件状态数据都存储在该对象中。...componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。...用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取import React,{Component} from 'react'

7045 0

React进阶(6)-react-redux的使用

image.png 前言您将在本文当中学习到 react-redux是什么,解决什么问题 UI组件以及容器组件 react-redux中两个重要的API,Provider以及connect mapStateToProps...,遵循一定的组件拆分规范,在React中更方便的使用Redux 关系: 它不是必须的,在实际项目中,可选用.是使用Redux还是使用react-redux,取决于你自己,项目组成员的熟悉程度,适合自己的才是最好的...react中任何组件都可以通过context获取store 只要被这个 Provider组件包裹了,那么它内部的子组件就有能力接收到store，内部的组件都有能力获取store的数据的这样也就意味着我们可以在任何一个组件里利用...综归来说, connect做了两件事情: 把store上的状态转换为内层的UI组件(傻瓜组件)的props 把内层UI组件(无状态组件)中的用户触发的动作转化为派送个store的动作,前者(mapStateToProps...mapStateToProps会订阅 Store，每当 state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

2.2K0 0

Redux快速上手

Redux有三大原则：整个应用的state被存储在单个的对象树中（store）；状态是只读的，只能通过actions改变状态；使用纯函数进行更改状态(reducer)。...将根组件包裹在中，将store作为props传入，使项目中的任何组件都可以使用store。然后使用connect()函数真正的连接react的组件和redux的store。...options 1、mapStateToProps(atate, ownProps)允许我们将store中的数据作为props绑定到组件上。...当store或ownProps发生变化时，mapStateToProps()函数会被调用，得出一个新的state，传递给App组件。...store.subscribe(listener) 4、listener通过store.getState()获取状态，React可以触发重新渲染视图。

1.4K2 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭