UI 更新需要昂贵的 DOM 操作, 而 React 内部使用几种巧妙的技术以便最小化 DOM 操作次数. 对于大部分应用而言, 使用 React 时无需专门优化就已拥有高性能的用户界面. 尽管如此, 你仍然有办法来加速你的 React 应用.
1. 虚拟化长列表
如果你的应用渲染了长列表 (上百甚至上千的数据) 时, React 官网推荐我们使用 "虚拟滚动" 技术. 这项技术会在有限的时间内仅渲染有限的内容, 并奇迹般地降低重新渲染组件消耗的时间, 以及创建 DOM 节点的数量.
React 官网推荐我们使用 react-Windows 和 react-virtualized 这 2 个热门的虚拟滚动库. 它们提供了多种可复用的组件, 用于展示列表, 网格和表格数据.
2. react-Windows 与 react-virtualized 有什么不同?
这 2 个库, 出自于同一个作者. react-virtualized 是作者对 React 和窗口概念都不熟悉时写的, 加了一些 API 和添加了太多非必要的功能和组件, 后来作者后悔了, 但因为一旦向开源项目添加了一些东西, 删除它对用户来说是非常痛苦的. 所以作者完整重写了 react-virtualized, 并且更专注于使包装更小和更快. 所以 react-Windows 是 react-virtualized 的轻量级替代品.
3. 使用 react-Windows 网格的问题和解决方案
我使用的是 VariableSizeGrid(可变尺寸网格).
问题 1: 使用 itemData 进行网格中数据的传递时, 当 columnCount(网格中的列数)*rowCount(网格中的行数)>itemData.length, 会出现网格滚动到最后一行时, 最后一行没有被渲染.
方案 1: 给 itemData 数组 push(columnCount*rowCount- itemData.length)个对象{true:true}, 然后在组件 render 时, 进行判断 return(<div></div>)
问题 2: 网格可以 100%填充页面的宽度或高度吗?(这个问题作者有在 NPM 上回答过)
方案 2: 网格宽高必须传入 number 类型, 所以不能直接写'100%', 需要使用 react-virtualized-auto-sizer 包.
问题 3: 这个比较重要, 没有提供可以传递方法的 API. 提供了可以在外层附加自定义属性或事件处理程序的 API:outerElementType. 但不能满足我想要点击按钮时才触发事件的需求.
方案 3:JavaScript 设计模式之观察者模式
来源: http://www.jianshu.com/p/948aa46543b2