2

我的 bestSellerDummy 数据没有改变，所以我想防止在父级重新渲染时重新渲染相同的 Product 子级。我尝试在父级中使用 useMemo 并在子级中使用 React.memo 但没有运气，每次父级重新渲染时它仍然显示日志“渲染产品组件..”。我在这里想念什么？请指教。

注意：每次我在 Product 组件中调用 addToCart 函数（属于 CartContext）时，都会重新渲染父级。

我正在使用 CartContext，可能与此有关，我不确定。这是沙箱：https ://codesandbox.io/s/dazzling-moore-po1c6?file=/src/App.js

主页.tsx

const [bestSellerDummy] = useState(
  [...new Array(5)].map((item, key) => ({
    id: key,
    imageUri:'https://1.jpg',
    name: 'My Dummy 1',
    price: 25,
  })),
);

const bestSellers = useMemo(() => {
  return bestSellerDummy.map((productDummy, key) => {
    return (
      <Product key={key} product={productDummy} />
    );
  });
}, [bestSellerDummy]);

return (
  ...
  {bestSellers}
  ...
)

产品.tsx

const Product: FunctionComponent<IProductProps> = (
  productProps,
) => {
  ...
  console.log('Rendering Product component..');
  ...
}

export default React.memo(Product);

=== 编辑：我的答案版本 ===

最后！在玩过useCallback, useMemo, fast-memoizeplugin .. 最适合我的是useReducer在 Context 中使用并用React.memo. 我认为这是优化子组件最干净优雅的方式。工作沙箱在这里：https ://codesandbox.io/s/eloquent-albattani-8x7h9?file=/src/App.js

4

4 回答 4

3

由于您使用的是useContext，因此您的组件将始终重新渲染。

当组件上方最近的 <MyContext.Provider> 更新时，此 Hook 将触发重新渲染，并将最新的上下文值传递给该 MyContext 提供程序。即使祖先使用 React.memo 或 shouldComponentUpdate，仍然会使用 useContext 从组件本身开始重新渲染。

参考：https ://reactjs.org/docs/hooks-reference.html#usecontext

我试图使用文档中指出的第二个策略重构您的代码：https ://github.com/facebook/react/issues/15156#issuecomment-474590693 。

但是，我很快意识到该addToCart函数具有cartItems它的依赖关系，因此每当cartItems发生变化时，由于每个组件都使用函数，因此addToCart避免重新渲染是不可能的。ProductaddToCart

这导致我使用它，useReducer因为React 保证它dispatch是稳定的并且在重新渲染期间不会改变。

所以这里是工作的 Codesandbox：https ://codesandbox.io/s/red-feather-dc7x6?file=/src/App.js:786-797

于 2020-11-15T09:31:51.520 回答
2

也用包装BestSellers组件React.memo。不要使用useMemo以避免不必要的组件更新，因为它可能会导致错误。它用于计算昂贵的值。

来源：https ://reactjs.org/docs/hooks-reference.html#usememo

于 2020-11-15T07:22:29.763 回答
0

试试这个方法

const [bestSellerDummy, setBestSellerDummy] = useState([]); // default empty

// get data from `useCallback`
const sellerData = React.useCallback(
  () => {
    return [...new Array(5)].map((item, key) => ({
     id: key,
     imageUri:'https://1.jpg',
     name: 'My Dummy 1',
     price: 25,
  }))

  }, []
);

useEffect( () => {
  setBestSellerDummy( sellerData() ); // set data when screen rendered from `useCallback`
}, [])

const bestSellers = useMemo(() => {
// ....
}, [bestSellerDummy]);
 return (
//  ...
{bestSellers}
//  ...
)
于 2020-11-15T07:01:27.877 回答
0

这是清除有关 useCallback、useMemo 和 useEffect 概念的最佳方法。

应用程序.js

import Child1 from "./Child1";
import Child2 from "./Child2";
import { useState, useEffect, useMemo, useCallback } from "react";
function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  console.log("Parent");
  const printx = useCallback(() => {
    console.log("x:" + x);
  }, [x]);
  useEffect(() => {
    printx();
    console.log("-------");
  }, [printx]);
  const child1 = useMemo(() => {
    return <Child1 x={x} />;
  }, [x]);
  const child2 = useMemo(() => {
    return <Child2 y={y} />;
  }, [y]);
  return (
    <div className="App">
      <h1>Parent</h1>
      <button onClick={() => setX(x + 1)}>X+</button>
      <button onClick={() => setY(y + 1)}>Y+</button>
      {child1}
      {child2}
    </div>
  );
}

export default App;

Child1.js

const Child1 = ({ x }) => {
  console.log("Child1");
  return (
    <div>
      <h1>Child 1:{x}</h1>
    </div>
  );
};
export default Child1;

Child2.js

const Child2 = ({ y }) => {
  console.log("Child2");
  return (
    <div>
      <h1>Child 2:{y}</h1>
    </div>
  );
};
export default Child2;
于 2021-11-12T19:03:49.150 回答