如何防止因为调用 hook useSelector() 导致的重新渲染？

Question

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

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

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

Hook useSelector 导致应用程序重新渲染 2 次以上，这意味着如果没有 Redux 的应用程序将只重新渲染 2 次，由状态更新引起，简单地说调用 useSelector() 将导致应用重新呈现 4 次。

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

npx create-react-app my-app --template redux
cd 我的应用程序
npm 启动
在App.js和features/counter/Counter.js

let i = 0;

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

检查浏览器 DevTools 的控制台。

Answer 1

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

来自 strict mode 的文档：

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods

Class component static getDerivedStateFromProps method

Function component bodies

State updater functions (the first argument to setState)

Functions passed to useState, useMemo, or useReducer

如何防止因为调用 hook useSelector() 导致的重新渲染？

How to prevent re-render caused because of calling hook useSelector()?

javascript

reactjs

redux

react-redux

redux-toolkit