即使数据没有变化，react redux也会使用选择器重新渲染。

Question

我正在使用redux和redux thunk的react.我有一个动作，我正在做一个网络请求。使用useSelector从redux存储中获取数据，但我遇到的问题是，每次调度动作时，组件都会重新渲染，我想让组件只在数据改变时才重新渲染。我已经尝试过使用shallowEqual作为useSelector的第二个参数。但是没有成功。我已经把它压缩成了这个沙盒中的最小例子。在控制台中，你可以看到该组件在每次网络请求时都会重新渲染。https:/codesandbox.iosuseselector-js6j0?file=srcApp.js:885-1294。

这是代码。

function LevelThree() {
  console.log(`Level three calls: ${++levelThreeCalls}`);
  const contextData = useSelector(state => state.data);
  console.log(contextData);
  const dispatch = useDispatch();
  useInterval(() => {
    dispatch(updateData());
  }, 1000);

  return (
    <div>
      <button onClick={() => dispatch(updateData())}>Change context</button>
      {contextData[0].userId}
    </div>
  );

}

Answer 1

你的组件在每次更新时都会重新渲染，原因是你在redux store中再次获取数据并更新它。

由于数据的引用发生了变化，useSelector函数会给你返回一个新的值并重新渲染组件。

你可以传递一个deepEqual比较函数作为第二个参数给useSelector，以避免重新渲染它的数据没有改变。

import _ from 'underscore';
...
const contextData = useSelector(state => state.data, _.isEqual);

然而，你必须小心使用这个，并衡量你的数据更新的频率，否则你会在你的代码中添加一个额外的计算，甚至不会阻止多次重新渲染。

工作演示