如何减少调用useEffect的次数？

Question

Google 的灯塔工具给了我的应用一个令人震惊的性能分数，所以我一直在做一些调查。我有一个名为Home的组件

在Home里面我有useEffect（只有一个），看起来像这样

useEffect(() => {
    console.log('rendering in here?') // called 14 times...what?!
    console.log(user.data, 'uvv') // called 13 times...again, What the heck?
}, [user.data])

我知道您放置了 [] 的第二个参数，以确保仅在数据更改时才调用 useEffect，但这是我没有得到的主要部分。当我控制台日志user.data 前4 个控制台日志是空数组。接下来的 9 个是长度为 9 的数组。所以在我看来，它应该只调用它两次？一次是[]，一次是[].length(9)，到底发生了什么？

我真的需要减少它，因为它一定会影响我的表现。让我知道我是否可以做任何其他事情来显着减少这些调用

这就是我得到user.data的方式

const Home = ({ ui, user }) => { // 我把它作为道具传入这里

const mapState = ({ user }) => ({
    user,
})

然后我的组件被连接了，所以我在这里传递它

Answer 1

为了克服这种情况，React Hooks 还提供了名为 useMemo 的功能。 您可以使用 useMemo 代替 useEffect 因为 useMemo 缓存它渲染的实例，并且每当它命中渲染时，它首先检查缓存是否有任何相关实例可用于给定的 deps.. 如果是这样，那么与其运行整个函数，它只会简单从缓存中返回。

Answer 2

这不是一个答案，但有太多代码无法放入评论中。首先，您可以通过临时替换原始根减速器来记录更改 user.data 的所有操作：

let lastData = {};
const logRootReducer = (state, action) => {
  const newState = rootReducer(state, action);
  if (newState.user.data !== lastData) {
    console.log(
      'action changed data:',
      action,
      newState.user.data,
      lastData
    );
    lastData = newState.user.data;
  }
  return newState;
};

导致 user.data 不断变化的另一件事是当您在 reducer 中执行类似操作时：

if (action.type === SOME_TYPE) {
  return {
    ...state,
    user: {
      ...state.user,
      //here data is set to a new array every time
      data: [],
    },
  };
}

相反，您可以这样做：

const EMPTY_DATA = [];
//... other code
data: EMPTY_DATA,

您的选择器正在使user 脱离状态并创建一个新对象，该对象将导致组件重新渲染，但效果的依赖项是 user.data，因此只有在数据实际更改时才会运行效果。

Redux devtools 也会以错误的方式显示差异，如果你在 state 中改变某些东西，devtools 会将它们显示为更改，但 React 不会将它们视为更改。当您将新对象分配给 data:[] 时，redux 不会将它们显示为更改，但 React 会将其视为更改。