tailwindcss/React 性能优化

tailwindcss vscode 空格才出提示

https://v2ex.com/t/1027326#reply4

"editor.quickSuggestions": {
  "strings": true
}

React 性能优化实用技巧

在开发React应用时，性能优化是一个永恒的话题。本文将分享几个实用的工具和技巧，帮助你提升React应用的性能。

React Developer Tools

Highlight Updates

开启Highlight Updates功能，可以帮助你直观地看到哪些组件正在重新渲染。当你的应用中的组件重新渲染时，它们会以绿色闪烁的形式显示。这是定位性能瓶颈的第一步。

性能测量与优化

console.time

使用console.time和console.timeEnd可以帮助你测量应用中某些操作的执行时间。这对于发现和优化那些慢速的操作特别有用。结合useMemo使用，可以在优化前后进行性能对比，直观地看到优化的效果。

why-did-you-render

why-did-you-render是一个监控React组件重新渲染的强大工具。它可以帮你实时监控并记录组件的每次重新渲染事件，并提供详细的信息，说明导致组件重新渲染的具体原因。这对于识别和减少不必要的渲染非常有帮助。

数据获取与管理

react-query

react-query提供了一套强大的数据同步工具，帮助你更有效地管理和缓存异步数据。使用react-query可以简化数据获取逻辑，并提高应用性能。

setQueryData

有时你可能需要手动更新由react-query管理的数据。setQueryData方法允许你直接更新缓存中的数据，这对于实现乐观更新等高级功能非常有用。

渲染优化

useOnScreen

useOnScreen是一个用于检测组件是否在屏幕上可见的Hook。当组件进入可视范围时，可以根据需要进行数据加载或其他操作，这有助于减少不必要的渲染和数据加载。

react-window

大型列表的渲染可能会对性能产生显著影响。react-window提供了虚拟列表的实现，只渲染可视范围内的元素。这极大地提高了渲染性能，尤其是在处理大量数据时。

React.lazy 和 loadable-components

对于大型应用，代码分割是提高加载性能的关键技术之一。React.lazy和loadable-components允许你按需加载组件，减少初始加载时间，提升用户体验。

通过应用这些技巧和工具，你可以显著提升你的React应用性能。记住，性能优化是一个持续的过程，需要不断地测试、优化和迭代。