在react内部其实已经使用了许多的技术去使得更新ui时对dom的操作代价最小化。对许多应用来说，使用react可以在没有使用特别优化手段的情况下获得更快的用户界面，即使如此，我们的react仍然有着许多的方式可以使得应用更加流畅。
使用生产环境下的构建
如果你在对你的应用进行性能分析或者遇到了性能问题，请确保你在打包构建应用时使用了生产环境下的配置项。
开发环境即development mode下，react会提供许多有用的警告，但这些警告功能会使得应用体积增加、反应速度变慢，所以你应该确保使用生产环境下的打包编译配置。
如果你无法确定你的打包过程是否正确，你可以通过安装chrome的插件来检查。https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
create-react-app
如果你使用的是create-react-app来创建并打包编译项目，当你运行npm run build 时，就会得到一个生产环境下的编译结果，但请记住，这仅仅在部署阶段才时必要的，在开发时请使用npm start
single-file builds
我们提供了适用于生产环境的react和react-dom库文件。
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Brunch
使用webpack插件 uglify-js-brunch 可以将你的js文件最小化
yarn add --dev uglify-js-brunch
brunch build -p
但请注意，这种做法只建议在生产环境下使用，因为会去掉react的警告功能，并且这种打包过程会消耗更多的时间。
展示长列表
如果你的应用会渲染大量的列表数据，我们建议使用一种称为‘windowing’的技术，这种技术下在任何给定的时间内只会渲染一小部分数据列表，并可以减少列表项的重复渲染（即再次渲染已经渲染过的数据）。
react-window和react-virtualized都是流行的使用windowing技术的库，他们都提供了一系列可重用的组件，这些组件能够帮助你以最好的性能展示列表以及表格数据。你也可以自己实现自己的windowing组件，如果你需要某些高度定制化的功能的话。
避免 reconciliation
react在内部维护着一个代表其ui结构的对象，它包含了从你的组件中返回的元素，这个对象有效避免了react对真实dom进行不必要的操作，因为操作真实dom所耗费的性能远远大于操作js对象，我们通常将这个js对象称为‘虚拟dom’，当一个组件的属性或者性质发生改变的时候，react会根据新生成的元素与之前虚拟dom的元素是否一致来决定是否重新渲染真实dom。
即使react只会更新真正发生改变的dom，这仍然需要一点时间来完成，当然这在大多数情况下都是在难以察觉的一瞬间完成的，但如果这个过程真的造成了可察觉的延迟现象，就需要使用钩子函数shoudComponentUpdate来重写其判断过程，这个钩子函数会在更新组件之前执行并决定着该组件是否会更新。
如果你明确知道你的组件在何种情况下需要或是不需要更新，你可以通过改写这个钩子函数来跳过其内部默认的reconciliation过程。
大多数情况下，我们会使用继承PureComponent而不是改写钩子函数来处理上述问题，PureComponent在进行reconciliation时仅仅会对组件的属性和状态进行浅层比较。
使用 immutable.js
当我们使用了PureCOmponen时，无法追踪到深层对象属性的变化，因此会造成某些异常表现，但是每次对深层对象进行复制又会产生额外的性能开销，好在immutablejs致力于解决这一点并卓有成效，我们可以对immutable对象进行基于内容的比较而不是基于指针地址的比较。
网友评论