useDispatch 渲染未更改的子级答案

【问题标题】：useDispatch render unchanged childernuseDispatch 渲染未更改的子级
【发布时间】：2020-04-24 14:54:46
【问题描述】：

这是一个带有挂钩到 Redux 商店以获取产品的功能组件。另外，我定义了removeFromCart 钩子来从产品列表中删除一个项目。

const ProductListHooks = () => {
  const products = useSelector( state => state.productsModule.products);
  const removeFromCart = useDispatch({ type:actions.REMOVE_FROM_CART});
  return (
    <>
      {products.map(product => {
        return (
          <ProductItem
            product={product}
            key={product.id}
            removeFromCart={removeFromCart}
          />
        );
      })}
    </>
  );
};

问题： 当我调用 removeFromCart 时，它会删除该项目，但会重新呈现列表中的所有其他项目。我该如何解决？

【问题讨论】：

您可以记住ProductItem 组件或为其实现shouldComponentUpdate()，如果道具没有更改，则停止重新渲染。您也可以将 ProductItem 设为纯组件，但请注意其含义（每次都检查浅 props）
@Jayce444 它是记忆和纯粹的，但它不起作用。

标签： reactjs redux react-hooks rerender

【解决方案1】：

可能不漂亮，但你可以记住每个项目：

const ProductItem = function memo({ product, removeFromCart }) {
 return useMemo(() => 
       <Item product={product} removeFromCart={removeFromCart} />
    , [product]);

}

【讨论】：