时间戳

首页 > 解决方案 > 如何防止由于调用钩子useSelector()而导致的重新渲染？

javascript - 如何防止由于调用钩子useSelector()而导致的重新渲染？

问题描述

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

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

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

HookuseSelector导致应用程序重新渲染 2 次并且它复合，这意味着如果应用程序Redux由于状态更新而仅重新渲染 2 次，那么简单地调用useSelector()将导致应用程序重新渲染 4 次。

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

  1. npx create-react-app my-app --template redux
  2. cd 我的应用程序
  3. npm 开始
  4. 添加 console.logApp.js和features/counter/Counter.js
let i = 0;

function App() {
  i++
  console.log("App()", i)
  
  ...
}
  1. 检查浏览器 DevTools 的控制台。

标签： javascriptreactjsreduxreact-reduxredux-toolkit

解决方案

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

来自严格模式的文档：

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

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

推荐阅读