react-redux使用useSelector获取数据导致组件重复渲染的问题

web_鲸鱼

已于 2023-02-13 11:32:38 修改

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： react.js javascript

于 2023-02-13 09:24:26 首次发布

本文链接：https://blog.csdn.net/goujiyong/article/details/129003244

版权

当使用React-Redux的useSelector钩子从store获取数据时，即使组件未使用变更的数据，store变化也会导致组件重复渲染。这是因为默认的浅比较策略。为避免这种情况，可以传递一个比较函数作为useSelector的第二个参数，如shallowEqual，以减少不必要的重渲染。

摘要由CSDN通过智能技术生成

现象：通过redux中的hooks – useSelector 获取store中的数据时，只要store中的数据发生了改变，即使组件中并没有获取修改的数据，组件也会进行重新渲染。

原因：是因为useSelector中默认使用的是 === 来判断两次获取的数据结果是否相同，如果我们返回的是一个新对象（如果返回的是基本数据类型，则不存在该问题），那么每次比较结果都为false，导致了很多不必要的re-render。如下：

const _obj = useSelector((store: any) => ({
         
  aaa

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web_鲸鱼

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React-redux使用教程

xm1037782843的博客

10-30

2897

react-redux,Redux 是 JavaScript 应用的状态容器

useSelector用法

qq_32094783的博客

08-06

2万+

作用：共享状态,从Redux的store中提取数据（state） const num=useSelector(state=>state.num)

参与评论您还未登录，请先登录后发表或查看评论

解决react组件渲染两次问题

Abdulaziz的博客

09-10

2615

最近做小项目遇到自己写的组件渲染了两次，找半天终于找到解决方法了。这个原因是 react严格模式导致的react严格模式是为了在我们开发过程中帮助我们发现小bug,通过故意重复调生命周期函数让我们发现问题。注意：这仅适用于开发模式。生产模式下生命周期不会被调用两次。

Typescript实现react-redux的useSelector和useDispatch的状态定义

最新发布

weixin_44523653的博客

09-03

423

背景：react中使用typescript,在引入redux之后很多状态定义有问题，记录下来（文章记录学习react-redux过程中的踩坑）。

React--》React组件变化每次都会导致重新渲染，如何解决？

ztK63LrD的博客

04-20

6522

可以看到初次渲染时，所有的组件都会被执行一次，当点击按钮时，父组件传递给子组件A的props值发生变化导致A组件又被重新渲染一次，接下来仅仅是父组件发生变化，当父组件的值为4的时候会再次导致子组件A的props值发生变化导致子组件A再次被重新渲染，因为孙组件B没有被传入props，导致其只有在初次渲染的时候被被渲染，后面即使父组件发生变化，其也不会重新渲染，具体的过程如上图所示。React.memo()是一个高阶组件，它接收另一个组件作为参数，并且会返回一个包装过的新组件，包装过的新组件就会。

react-redux 中使用useSelector、useDispatch

大灰狼的小绵羊哥哥的博客

05-01

7667

1. react-redux 之 Hooks api Hooks 提供了很多好用的api，甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突，而且可以互相借鉴，react-redux(7.1)也引入了Hooks风格的Api。 1.1 useState 的缺点 useState和useReducer是Hooks中最常用的Api，适合用来进行简单的状态管理，但也都有一些无法满足的需求 useState可以用最简单的方式更新

关于react-redux修改数据页面没有即时渲染问题

qq_41786057的博客

07-15

533

react-redux修改数据页面没有重新渲染

在Redux中使用useSelector和useDispatch

前端精髓

05-07

4077

如何在redux中使用useSelector和useDispacth来获取数据。我们可以使用mapStateToProps的替代方法useSelector。我们还可以使用mapDispatchToProps的替代方法useuseppatch。之前使用mapStateToProps和mapDispatchToProps的示例。 import update_person from './store/actions/personAction'; import { connect } from 'react-r

React-redux+Typescript项目——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect

qq_54896312的博客

11-24

2250

React-redux+Typescript项目——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect

React-Hooks 和 React-Redux

luoxiaonuan_hi的博客

09-09

1151

React-Hooks 的使用 React-redux 的使用

react-redux

04-04

- **React-Redux v6 引入的 `useSelector` 和 `useDispatch`**：这两个 Hook 直接在 React 组件内部使用，减少了对 connect() 的依赖，提高了代码的可读性和性能。 - **PureComponent 或 React.memo**：为减少不必...

redux中使用useSelector、useDispatch替代connect

热门推荐

移动端开发干货分享

02-26

4万+

Hooks 提供了很多好用的api，甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突，而且可以互相借鉴，最近react-edux最新版本中也引入了Hooks风格的Api。 useState和useReducer是Hooks中最常用的Api，适合用来进行简单的状态管理，但也都有一些无法满足的需求 useState impo...

使用hooks编写redux

大灰狼的小绵羊哥哥的博客

06-25

2184

最近有一个问题比较火，是在有了react hooks之后，我们还需要redux这种状态管理工具吗？个人的观点是：仍然需要。react hooks帮助我们更好的复用代码逻辑，但是对于复杂应用而言，仍然需要redux来管理数据流，并且redux跟hooks的配合能够更好解耦组件的逻辑。最近发布的react-redux@7.1.0-alpha提供了对react hooks的支持，使用hooks将会改变过...

react无效渲染优化--工具篇

行星飞行的博客

02-13

849

造成无效渲染的第二大原因就是引用数据类型引用不稳定所导致，举个最简单的例子，组件A渲染前后都接受了一个空数组，且两次数组的引用都不同，这对于组件而言因为引用不同所以是新数据自然得再次渲染，但对于研发而言，我们心里其实是知道这是无意义的，所以如何保证其引用的稳定性就是解决无效渲染的核心了。而言，它一定是只帮你找出无效渲染，且理由都是上面这种引用数据前后完全一样，只是单纯的引用不同，如何保证引用那么又回到了上文提到的减少无效渲染的手段，如果一个组件一个无效渲染提示都没有，那说明这个组件非常健康。

useSelector性能分析

qq_43599049的博客

12-28

1883

我们在做redux的开发的时候可以借助react-redux来进行开发，从中获取到connect函数，将mapStateToProps和mapDispatchToPros以及组件传到connect函数中。包裹一层返回新的组件。然后这样组件就可以通过props来获取到redux中的数据以及函数。而且我们在不借助react-redux的时候需要用store.subscribe来监听数据的变化从而去改变组件内部的state的值进而去重新渲染整个页面，但是借助了react-redux我们就不需要去监听了。但是我们

如何使useselector不是灾难

weixin_26711425的博客

09-09

1649

Disclaimer: We will focus on useSelector itself in this article, rather than third-party libraries like reselect, because it's out of scope of the article. 免责声明：本文将重点关注useSelector本身，而不是像reselect这样的第三...

深刻理解useSelector，useDispatch以及useReducer

qq_43372697的博客

09-21

2339

深刻理解useSelector，useDispatch以及useReducer

Redux学习3 useSelector 与 useDispatch

qq_40600414的博客

12-15

1681

Redux学习3 useSelector 与 useDispatch 在 react-redux 中学习了使用connect方法对ui组件进行加强，从而使得组件可以通过mapStateToProps和mapDispatchToProps来进行将 redux中的state的数据存进props来读取和修改redux的数据，但是如果每个组件都要去利用connect方法进行加强，会太麻烦，所以reacct-redux 新版本7.1推出了hooks风格的api，可以更加简单的去操作redux的数据。 u

react-redux用法

07-27

React-Redux是一个用于在React应用程序中管理状态的库。它结合了React和Redux，使得在React组件中使用Redux变得更加简单。要使用React-Redux，首先需要安装它： ``` npm install react-redux ``` 然后，在你的应用程序中引入所需的模块： ```jsx import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { createStore } from 'redux'; // 创建一个Redux store const store = createStore(reducer); // 创建一个React组件 const App = () => { // 使用useDispatch和useSelector钩子来访问Redux store const dispatch = useDispatch(); const state = useSelector(state => state); // 渲染组件 return ( <div> <h1>Hello React-Redux!</h1> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <p>Count: {state.count}</p> </div> ); }; // 渲染根组件并将Redux store传递给应用程序 ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ``` 在上面的示例中，我们首先创建了一个Redux store，然后使用`useDispatch`和`useSelector`钩子来访问Redux store。`useDispatch`用于触发action，`useSelector`用于选择需要的state。然后，在组件中，我们可以通过`dispatch`函数来分发action，以更新状态。最后，我们使用`Provider`组件将Redux store传递给整个应用程序。这只是React-Redux的基本用法，它还提供了更多的功能和API来帮助你更好地管理状态。你可以参考React-Redux的官方文档来了解更多用法和示例。