子组件中的useSelector重新渲染父组件

Question

我是反应新手，我正在尝试使用 redux，但我注意到每次我的子组件（图标包）更改包中的项目数量时，整个标头组件都会重新渲染。我努力了，

• 使用备忘录
• 创建选择器
• React.memo（标题）

有什么建议么？

标头组件

const Header = ({ currentUser }) => {
    const { hidden } = useSelector(state => state.cart);

    return (
        <div className="header">
            ...
            <div className="options">
                ...
                <CartIcon />
            </div>

        </div>);
};

export default Header;

购物车图标组件

const CartIcon = () => {
    const selectCartItems = createSelector(
        state => state.cart,
        cart => cart.cartItems
    );
    const cartItems = useSelector(selectCartItems);
    const dispatch = useDispatch();

    const totalItemsCount = (cartItems) => {
        return cartItems.reduce((acc, crr) =>
            acc + crr.quantity
            , 0)
    };
    const totalItems = useMemo(() => totalItemsCount(cartItems), [cartItems])

    return (
        <div className="cart-icon" onClick={(() => dispatch(actionCreators.onToggleCart()))}>
            <ShoppingIcon className="shopping-icon" />
            <span className="item-count">{totalItems}</span>
        </div>
    );
};

export default CartIcon;

Answer 1

这可能是因为您的state.cart价值正在根据购物车中的商品进行更新。 useSelector每当返回的引用发生变化时，都会强制重新渲染，因此每当Header购物车数据发生变化时，都会重新渲染。

您应该将其更改为仅选择组件需要的数据Header：

const hidden = useSelector(state => state.cart.hidden);