React代码优化秘诀：高效渲染部分组件

2023-11-09 02:22:18

React中的部分渲染技巧：巧用memo和useCallback

在React中，组件通常通过props传递数据，并在props发生变化时重新渲染。但是，在某些情况下，我们只需要重新渲染组件的一部分，而不需要重新渲染整个组件。例如，当列表中的某一项数据发生变化时，我们只需重新渲染该项，而不是整个列表。

memo和useCallback的妙用

React中的memo和useCallback钩子可以帮助我们实现部分渲染。memo钩子用于记住组件的props，如果props没有变化，则组件不会重新渲染。useCallback钩子用于记住组件的回调函数，如果回调函数没有变化，则组件不会重新渲染。

实战示例

以下是一个具体的例子，展示如何使用memo和useCallback实现部分渲染：

假设我们有一个列表组件，其中每一项都是一个子组件。当列表中的某一项数据发生变化时，我们只需重新渲染该项，而不是整个列表。

列表组件：

import { memo } from 'react';

const List = memo(({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </ul>
  );
});

我们使用memo钩子记忆列表组件的props。当列表数据没有变化时，列表组件就不会重新渲染。

子组件：

import { useCallback } from 'react';

const Item = ({ item, onItemChange }) => {
  const handleItemChange = useCallback(() => {
    onItemChange(item);
  }, [item, onItemChange]);

  return (
    <li>
      <input type="text" value={item.name} onChange={handleItemChange} />
    </li>
  );
};