react组件的性能优化有哪些方面
1、使用React开发的项目，可以从加载性能和运行时性能两个方面进行优化。加载性能优化的目标是让用户更早地看到界面、更早地和应用交互。运行时性能优化目标是降低卡顿，交互更流畅 。我们知道React的setState会触发diff和更新。
2、对于函数式组件，react也提供了react.memo的形式来做优化处理。React.memo只检查props的变更，默认情况下，如果传入的是对象的形式，React.memo只做浅比较，如果想要做复杂的比较的话，可以通过第二个参数传入具体的比较规则。
3、React将差异部分以最小的代价更新到真实的DOM树中。
4、React官网推荐我们使用 react-window 和 react-virtualized 这2个热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。这2个库，出自于同一个作者。
5、让组件只监控特定数据的变更，再进行渲染后的操作，忽略不必要的操作，很好的优化了组件性能。只有一个参数，每一次组件渲染完成后 且 在下一次渲染前 被调用。有两个参数，第二个参数是空数组( [] ) 。
前端react单页应用项目太大,导致开发环境编译过慢,有什么解决思路么...
React 很简单，也很难 简单是因为 React 的 API 真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看 Angular……）。
看起来好像挺麻烦，但是通过 webpack 的 code split 以及配合 react router 就可以方便实现。具体的例子可以看下 react router 的官方示例 huge apps。不过这里还是讲下之前配置踩过的坑。
安装babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader： babel加载器 babel-preset-env ： 根据配置的 env 只编译那些还不支持的特性。
React性能优化之减少组件渲染次数
1、一般情况下我们对class组件做优化，都是在shouldComponentUpdate这个生命周期里面做相应的判断来确认是否需要重新渲染，以达到优化的效果。后来React为class组件提供了pureComponent来实现这一效果。
2、react 初始化组件后会执行组件内所有 render () 方法，然后生成虚拟DOM的树形结构，然后在适当的时候将虚拟dom写到浏览器的真实dom中。因为 react 总是根据虚拟dom来生成真实dom，所以最后会把服务器端渲染好的HTML全部替换掉。
3、这个工具可以在渲染React应用时候打印各个组件的各种耗时，用来分析性能浪费。
4、如果你的应用渲染了长列表（上百甚至上千的数据）时，React官网推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。
5、后面会使用 Immutable.is 来减少 React 重复渲染，提高性能。另外，还有 mori、cortex 等，因为类似就不再介绍。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
