useMemo 使用误区

问题背景

在某一个h5项目中，使用了 useMemo 对项目中的组件进行优化，减少组件不必要的re-render, 优化后的结果：

• 在组件的props和状态未改变时，组件不再进行 re-render
  表面上看，这样优化没毛病，提高了组件性能，然后仔细阅读官方文档、以及网上一些大牛的文章，你会发现，你错了！！！
  实际上我们优化时忽略了一个问题：

• useMemo hook 本身的开销！
  下面将以使用此 hook 和未使用此 hook 的组件性能对比数据来说明，是否应该：
  remove most of useMemo

useMemo 使用前后组件性能对比

组件的复杂度为1时：

• 使用useMemo时首次渲染和re-render时间都更长

组件的复杂度为100 时：

• 首次渲染时，使用useMemo更耗时
• re-render 时useMemo稍快

组件复杂度为1000时：

• useMemo在首次渲染时更慢
• re-render 时快了一点

组件复杂度为5000时：

• useMemo首次渲染时更慢
• re-render 更快

结论

useMemo 本身的开销会随着组件的复杂度逐渐变大，导致首次渲染更慢，在实际项目中，我们应该remove most of useMemo 。

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞