当使用react-devtools时,它告诉我我的根组件重新渲染的原因是因为钩子发生了变化?
当我删除任何 useSelectors 时,我的根组件仅渲染一次,启用后它渲染 6 次。
对于为什么会发生这种情况,有哪些猜测?
import {
/// Data State Constants...
SET_USER_DATA,
SET_BADGE_COUNT,
} from "../Actions/gameState";
const initialState = {
/// Data state...
userData: [],
badgeCount: 0,
};
export default function gameState(state = initialState, action) {
const { type, payload } = action || {};
switch (type) {
/////////////////////////
/// Data state Reducers...
/////////////////////////
case SET_USER_DATA: {
return { ...state, userData: payload };
}
case SET_BADGE_COUNT: {
return { ...state, badgeCount: payload };
}
default:
return state;
}
}
好的,问题是:useSelector 将新值与旧值进行严格比较===
。您可以为每个字段调用一个 useSelector 或实现shallowEqual
from react-redux
:
const someState = useSelector(state=>state.myState.someState, shallowEqual)
这里是文档:https://react-redux.js.org/next/api/hooks#equality-comparisons-and-updates https://react-redux.js.org/next/api/hooks#equality-comparisons-and-updates
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)