react项目性能优化（react性能优化笔试题总结）

大家好，今天来为大家解答react性能优化笔试题总结这个问题的一些问题点，包括react项目性能优化也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

react组件的性能优化有哪些方面

减少组件的渲染次数，能提升 React App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。组件 Render 会导致的其子组件 Render，即使子组件的 state， props 没变。

对于函数式组件，react也提供了react.memo的形式来做优化处理。React.memo只检查props的变更，默认情况下，如果传入的是对象的形式，React.memo只做浅比较，如果想要做复杂的比较的话，可以通过第二个参数传入具体的比较规则。

React将差异部分以最小的代价更新到 的DOM树中。

React 推荐我们使用 react-window 和 react-virtualized 这2个热门的虚拟滚动库。它们提供了多种可复用的组件，用于展示列表、网格和表格数据。这2个库，出自于同一个作者。

让组件只 特定数据的变更，再进行渲染后的操作，忽略不必要的操作，很好的优化了组件性能。只有一个参数，每一次组件渲染完成后 且 在下一次渲染前 被调用。有两个参数，第二个参数是空数组( [] ) 。

React性能优化之减少组件渲染次数

1、一般情况下我们对class组件做优化，都是在shouldComponentUpdate这个生命周期里面做相应的 断来确认是否需要重新渲染，以达到优化的效果。后来React为class组件提供了pureComponent来实现这一效果。

2、react 使用 checksum 机制进行保障。什么叫React首屏渲染？简单的说就是 react 在浏览器内存中第一次生成的虚拟 dom 树。切记是虚拟 dom ，而不是浏览器的dom。

3、React 提供了一个性能检测 ： react-addons-perf 。这个 可以在渲染React应用时候打印各个组件的各种耗时，用来分析性能浪费。

4、如果你的应用渲染了长列表（上百甚至上千的数据）时，React 推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。

5、容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。

6、在展示大型列表和表格数据， 如： 城市列表、通讯录、 等，会导致页面不流畅、卡顿等性能问题。原因： 大量的DOM节点的重绘和重排，设备老旧；导致移动设备耗电耗电加快，设备发热。

记录React性能优化之“虚拟滚动”技术——react-window

1、如果你的应用渲染了长列表（上百甚至上千的数据）时，React 推荐我们使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。

2、滚动容器中有个属性叫 scrollTop ，表示当前已滚动的高度，也就是上方不可见的区域。我们用 scrollTop 除以单个元素的高度 domHeight ，再向下取整，即可得到当前可见区域第一个元素的下标。

3、首先，使用虚拟滚动技术可以提高列表渲染的性能，尤其是在数据量较大的情况下。虚拟滚动会根据当前可见区域的大小，只渲染可见区域内的部分列表项，而不是一次性渲染全部列表数据。

4、react-transition-group 包含 CSSTransitionGroup 和 TransitionGroup 两个动画插件，其中，后者是底层 api，前者是后者的进一步封装，可以较为便捷地实现 css 动画。

5、React中通过使用Virtual DOM机制来避免手动操作DOM，提高代码性能。Virtual DOM是在内存中创建的一个抽象的虚拟DOM树，用来描述页面的结构和内容，与 的DOM树相对应。

如果你还想了解更多这方面的信息，记得收藏关注本站。