React使用JSX map渲染列表时如何避免子组件不必要卸载？

问题1解答 #

这类卸载行为完全可以避免。你对key属性的逻辑理解是正确的，当前场景下你使用的item.index作为key并没有发生变化，并不是key变更触发的组件卸载。你观测到的卸载日志是错误写法导致的假象：你ListItem组件内打印挂载、卸载的useEffect没有添加空依赖数组[]，每次组件重渲染都会先执行上一次渲染的副作用清理函数（打印卸载日志），再执行新的副作用（打印挂载日志），并非组件真的被卸载。

问题2解决方案 #

你可以通过以下修改规避当前问题，同时避免后续不必要的性能损耗和业务故障：

• 修正ListItem内副作用的依赖配置：所有只需要在真实挂载、卸载阶段执行的逻辑，都给对应useEffect添加空依赖数组[]，避免日志误导，也避免异步逻辑被无意义的重渲染打断。
• 优化useCallback的更新逻辑，移除对items的依赖：使用setItems的函数式更新语法，无需依赖外部的items变量即可完成状态更新，保证callback引用永远固定：

const callback = useCallback((updatedItem) => {
  setItems(prevItems => {
    const newItems = [...prevItems];
    newItems[updatedItem.index] = updatedItem;
    return newItems;
  });
}, []);

• 用React.memo包裹ListItem组件：现在callback引用固定，只有当前被修改的item属性会发生变化，包裹后只有被操作的输入项会触发重渲染，其余项完全不会被影响。
• 如果你的异步逻辑和输入项的状态更新无关，可以将其放在添加了空依赖的useEffect中，只会在组件真实挂载时执行一次，真实卸载时执行清理，完全不会被重渲染逻辑干扰。

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