useSelector 钩子：如何正确使用第二个参数（shallowEqual）

Question

我有这段代码片段，可以从商店中获取计数..

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useSelector, useDispatch, shallowEqual } from "react-redux";
import { createStore } from "redux";

function count(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
   }
}

const store = createStore(count);

function App() {
  const count = useSelector(state => state, shallowEqual);
  const dispatch = useDispatch();
...
}

在这种情况下，如果我在 useSelector 中使用 shallowEqual 有什么区别？

Answer 1

因为你是 return 从 select 获取原始值，所以不管你是否使用 shallowCopy 都没有关系，默认情况下，它通过严格的 === 引用相等性检查

进行比较

当您 select 一个内容可能相似但引用不同的对象时，您可以使用 shallowEquals。

例如

const a = { key1 : "hello" }
const b = { key1 : "hello" }

console.log( a === b ) // will log false
console.log( shallowEquals(a, b)) // will log true

因此，如果您 return 从 useSelector 方法中提出对象并且只想比较内容，那么您可以使用 shallowCopy 来避免额外的重新渲染

例如

useSelector(state => ({count : state }), shallowEqual);

useSelector 会比较对象的内容，如果相同则不会重新渲染

useSelector 钩子：如何正确使用第二个参数（shallowEqual）

useSelector hook : how to use the second argument correctly (shallowEqual)

reactjs

redux

react-redux

react-hooks