使用useMemo钩子时的重渲染问题：交换a、b值会触发重渲染吗？

先看这段代码：

const sum = useMemo(() => a + b, [a, b])

当前渲染时a=5、b=10，交换为a=10、b=5时，组件会不会触发重渲染？答案得看a和b的来源：

• 如果a、b是组件自身的state：修改state（不管值交换后计算结果是否相同）都会触发组件重渲染。useMemo此时会因为依赖数组[a,b]的内容变化（从[5,10]变成[10,5]）重新执行求和回调，但这只是缓存值的更新，组件重渲染的根本原因是state发生了变更。

• 如果a、b是父组件传递的props：

  • 若当前组件没被React.memo包裹：只要props发生变化（哪怕a+b结果不变），组件会跟着父组件的更新触发重渲染。
  • 若当前组件用了React.memo：默认的浅比较会认为前后props的a、b值都变了，所以还是会触发重渲染。除非你自定义memo的比较函数，判断a+b的结果是否一致来决定是否重渲染，但这不是React的默认行为。

总结一下：组件重渲染的触发和useMemo的缓存结果无关，只看state/props是否发生了变更（或者其他触发重渲染的条件，比如上下文更新）。useMemo只是在组件重渲染时，决定要不要重新计算sum的值，它本身不会阻止或触发组件重渲染。

内容的提问来源于stack exchange，提问作者vikash tiwary