如何防止由于调用hook useSelector（）而导致的重新渲染？

Question

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

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

我尚未在React Native上测试此行为，但我认为在React Native中重新渲染将成为问题。

挂钩useSelector导致应用重新渲染2次以上，并且复合，这意味着如果状态更新导致没有Redux的应用仅重新渲染2次，只需调用{ {1}}将导致应用重新渲染4次。

这是我重现此问题的步骤：

1. npx create-react-app my-app --template redux
2. cd my-app
3. npm开始
4. 在useSelector()和App.js中添加console.log

features/counter/Counter.js

1. 检查您的浏览器DevTools的控制台。

Answer 1

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

来自strict mode的文档：

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

• 类组件constructor，render和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件主体
• 状态更新程序功能（setState的第一个参数）
• 传递给useState，useMemo或useReducer的功能