React检测useEffect触发时哪些道具发生了变化

Question

我想检测哪些参数道具在我的使用效果中发生了变化。我怎样才能做到这一点？我需要这样的东西：

const myComponent = () => {
...
useEffect(() => {
if (prop1 === isTheOneThatChangedAndCusedTheTrigger){
doSomething(prop1);
}else{
doSomething(prop2);
}
},[prop1, prop2]);
};
export function myComponent;

Answer 1

虽然您可以使用类似usePrevious的东西来保留对特定状态所包含的最后一个值的引用，然后将其与效果挂钩内状态中的当前值进行比较。。。

const usePrevious = (state) => {
const ref = useRef();
useEffect(() => {
ref.current = state;
}, [value]);
return ref.current;
}
const myComponent = () => {
const [prop1, setProp1] = useState();
const prevProp1 = usePrevious(prop1);
const [prop2, setProp2] = useState();
const prevProp2 = usePrevious(prop2);
useEffect(() => {
if (prop1 !== prevProp1){
doSomething(prop1);
}
// Both may have changed at the same time - so you might not want `else`
if (prop2 !== prevProp2) {
doSomething(prop2);
}
},[prop1, prop2]);
};

它有点难看。考虑是否有更好的方法来构建代码，这样就不需要了——比如使用单独的效果。

useEffect(() => {
doSomething(prop1);
}, [prop1]);
useEffect(() => {
doSomething(prop2);
}, [prop2]);