哪个参数触发了 React.useMemo 重新计算？

Question

这是我的 React 钩子代码：

function calc_c({a,b}){
  //some long calculation that is based on a,b
}
function MyComponent(params){
  var a=calc_a(params)
  var a=calc_b(params)
  var c=React.useMemo(()=>calc_c({a,b},[a,b])
}

我的问题：我如何找出[a,b] 中的哪些参数发生了变化并导致了对calc_c 的调用

编辑：我最终使用了 skyboyer 优秀答案的通用版本：

export function useChanged(name,value){
  function print_it(){
    console.log('changed',name)
  }
  React.useMemo(print_it,[value])
}

Answer 1

这取决于您是否要求调试目的，或者您希望在代码中依赖它（例如“如果 A 更改则返回 B，否则返回 C”）

对于这两种情况，没有简单的方法可以实现。但解决方法会有所不同。

假设您只是想弄清楚为什么要重新计算。然后就放上百亿个

useEffect(() => {
  console.log("a is changed");
}, [a])

每个依赖项一个。是的，无聊和重复。但最简单的方法是，您实际上应该更少担心额外。或者看看useWhatChaged 是否对你有用（如果依赖列表中有十几个变量）。

另一件事，如果您想在常规中进行检查（但为什么？）（我的意思不是在用于调试目的的临时代码中）。然后你可以使用usePrevious 或写类似的东西。