让你的代码更快：使用计算属性的风险与技巧
2024-02-05 18:27:17
性能优化实践：计算属性内使用cloneDeep可能会导致性能问题
性能优化的文章相信同学们都看的很多，大部分的套路基本上都了解过。比如针对资源文件优化（webpack打包优化、gzip压缩、cdn加速、浏览器缓存、懒加载、http2等），页面渲染优化（SSR、CSR、SSG），图片优化（webp、base64、图片压缩），代码优化（tree-shaking、代码分割、函数柯里化等），除此之外，很多文章都会介绍一些技巧，比如使用React的计算属性、useMemo等来进行性能优化。
React的计算属性是一个非常强大的特性，它允许我们在render函数中使用一个函数来计算一个值，然后将这个值作为props传递给子组件。
使用计算属性的好处在于：
- 提高代码的可读性。 当我们把一些复杂的计算逻辑放在计算属性中时，render函数就会变得更加简洁和清晰。
- 提高性能。 如果计算属性的返回值不变，那么在组件重新渲染时，计算属性就不会被重新计算，从而提高性能。
但当我们使用计算属性时，也需要注意一些潜在的性能问题。
一、计算属性中的数据改变时，组件不会重新渲染。
这是因为计算属性的值只会在组件重新渲染时才会被重新计算。如果计算属性中的数据在组件渲染后发生改变，组件不会重新渲染，从而导致计算属性的值不正确。
二、cloneDeep可能导致性能问题。
cloneDeep是JavaScript的一个方法，它可以对一个对象进行深拷贝。深拷贝意味着创建一个新的对象，并将其所有属性和嵌套对象都复制到新的对象中。
在React中，如果我们在计算属性中使用了cloneDeep，可能会导致性能问题。这是因为cloneDeep是一个非常耗时的操作，它会增加组件的渲染时间。
三、避免使用cloneDeep的技巧。
- 尽量避免在计算属性中使用cloneDeep。 如果必须使用cloneDeep，尽量将其用在一些不会经常改变的数据上。
- 使用浅拷贝。 浅拷贝只复制对象的直接属性，而不复制嵌套对象。浅拷贝的性能要比深拷贝好很多。
- 使用React的useMemo。 useMemo可以帮助我们避免在组件重新渲染时重新计算一些纯函数。
四、总结。
- 计算属性是一个非常强大的特性，但使用时需要注意一些潜在的性能问题。
- cloneDeep可能导致性能问题。
- 尽量避免在计算属性中使用cloneDeep。如果必须使用cloneDeep，尽量将其用在一些不会经常改变的数据上。
- 使用浅拷贝。
- 使用React的useMemo。
五、相关扩展。
- 使用函数组件。 函数组件的性能要比class组件好。这是因为函数组件没有状态，所以它们不需要在组件重新渲染时重新实例化。
- 使用useCallback。 useCallback可以帮助我们避免在组件重新渲染时重新创建一些函数。
- 使用useReducer。 useReducer可以帮助我们管理组件的状态。useReducer的性能要比useState好，因为它可以批量更新状态。
六、结语。
性能优化是一个非常重要的话题。通过对组件进行性能优化，我们可以提高应用程序的性能，从而提高用户体验。
我希望这篇文章能够帮助你避免在使用React的计算属性时遇到性能问题。
附录
