使用Hooks实现React父子组件的最佳实践及常见问题解答

问题解答 #

1. 是否应该在Child组件中使用useState？ #

不需要。如果在Child里用useState(item)保存数据副本，会导致Parent的items数组与Child内部状态不同步，出现数据不一致的问题。正确做法是状态提升，把items的管理完全放在Parent组件中，Child作为受控组件，仅负责接收数据和触发更新/删除的回调函数。

2. 是否需要对updateItem/deleteItem函数使用useCallback？ #

需要，但你之前遇到的异常并非useCallback的问题，大概率是map渲染Child时未添加唯一且稳定的key，导致React错误复用了组件实例。

使用useCallback的核心作用是稳定函数引用，避免Parent每次重渲染时生成新的回调函数，配合React.memo可减少Child组件的不必要重渲染。使用时只需把setItems作为useCallback的依赖即可（setItems是React提供的稳定函数，不会随渲染变化）。

3. 如何解决单个子组件更新导致所有子组件重渲染的问题？ #

通过两个优化手段解决：

• 给每个Child组件添加唯一的key（必须是item的唯一标识，比如id，不能用索引），让React能准确识别组件的变化。
• 用React.memo包裹Child组件，使其仅在props变化时重渲染；同时用useCallback稳定Parent传递的updateItem和deleteItem函数引用，避免因函数引用变化触发Child重渲染。

规范高效的实现代码 #

Parent组件 #

import { useState, useCallback } from 'react';
import Child from './Child';

function Parent() {
  const [items, setItems] = useState([
    { id: 1, content: '第一项' },
    { id: 2, content: '第二项' },
    { id: 3, content: '第三项' }
  ]);

  // 用useCallback稳定updateItem函数引用
  const updateItem = useCallback((itemId, newContent) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === itemId ? { ...item, content: newContent } : item
      )
    );
  }, []);

  // 用useCallback稳定deleteItem函数引用
  const deleteItem = useCallback((itemId) => {
    setItems(prevItems => prevItems.filter(item => item.id !== itemId));
  }, []);

  return (
    <div className="parent">
      {items.map(item => (
        // 必须使用item的唯一id作为key
        <Child
          key={item.id}
          item={item}
          updateItem={updateItem}
          deleteItem={deleteItem}
        />
      ))}
    </div>
  );
}

export default Parent;

Child组件 #

import { memo } from 'react';

// 用React.memo包裹，只有props变化时才重渲染
const Child = memo(({ item, updateItem, deleteItem }) => {
  const handleUpdate = (e) => {
    updateItem(item.id, e.target.value);
  };

  const handleDelete = () => {
    deleteItem(item.id);
  };

  return (
    <div className="child">
      <input 
        type="text" 
        value={item.content} 
        onChange={handleUpdate} 
      />
      <button onClick={handleDelete}>删除</button>
    </div>
  );
});

export default Child;

内容的提问来源于stack exchange，提问作者ddolce