如何防止调用 hook useSelector() 导致重新渲染？答案

【问题标题】：How to prevent re-render caused because of calling hook useSelector()?如何防止调用 hook useSelector() 导致重新渲染？
【发布时间】：2025-12-16 16:05:02
【问题描述】：

EDIT 是由<React.StrictMode></React.StrictMode> 中的index.js 引起的。我不知道为什么，但这很奇怪。

我注意到钩子useSelector() 导致应用程序不必要地重新渲染。这是预期的吗？如果是，我应该放弃使用redux-toolkit-js吗？

我没有在 React Native 上测试过这种行为，但我认为在 React Native 中重新渲染会成为一个问题。

Hook useSelector 导致应用重新渲染 2 次并且复合，这意味着如果没有 Redux 的应用将仅重新渲染 2 次，由于状态更新，只需调用 useSelector() 将导致应用重新渲染 4 次。

这是我重现问题所采取的步骤：

npx create-react-app my-app --template redux
cd my-app
npm 开始
在App.js 和features/counter/Counter.js 中添加console.log

let i = 0;

function App() {
  i++
  console.log("App()", i)
  
  ...
}

检查浏览器 DevTools 的控制台。

【问题讨论】：

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

React 在开发环境中以严格模式进行额外渲染，以帮助您发现错误并为您做一些检查。它不会在生产版本中执行此操作。

来自strict mode 的文档：

严格模式无法自动为您检测副作用，但可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来完成的：

类组件constructor、render和shouldComponentUpdate方法

类组件静态getDerivedStateFromProps方法

函数组件体

状态更新函数（setState 的第一个参数）

传递给useState、useMemo 或useReducer 的函数

【讨论】：