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

Question

这是我的React hooks代码:

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")

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

假设您只是想弄清楚为什么要重新计算。然后输入bazillion

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

每个依赖项一个。是的，无聊又重复。但最简单的方法是，您应该越少担心另外的。或者看看useWhatChaged是否适用于你(如果在依赖列表中有十几个变量)。

另一件事，如果你想在你的常规代码(不是为了调试目的的临时代码)中做检查(但为什么?)那么您可以使用usePrevious或编写类似的内容。