react中的性能优化

                                                                        react中的性能优化 

在项目开发的过程中，当你完成了一个产品的开发并不算你项目的结束，因为你还要去考虑你的代码的执行效率，项目的运行速度等问题，因此在react中，有如下的办法去提升你在项目开发中的效率问题

1.使用生产构建，如果当你在产品的测试或者遇到性能又或者遇到开发上遇到运行的问题，你可以降低你的代码测试范围。在默认的情况下，react会有很多的警告或者提示，这些都能帮你很好的快速找到问题，但是正是因为这些的存在，使项目的运行在性能上降低了很多，因此你应该更加准备的去使用这些警告或者提示等。要是你不确定你的项目的整个构建情况是否正确，你可以使用谷歌上的开发者工具安装react插件

当你在浏览器中看到上面的这个小图标，就说明你的项目配置是正确的

2.使用create-react-app 去创建官方的脚手架，在这个时候你不需要去配置你的项目开发过程中需要的环境，直接安装使用即可。最后使用npm start运行就可以去使用

3.单一文件的引入，这种方式在前面已经说过，在具体的生产产品的过程中，不建议去使用。在你去学习的时候可以去使用。

4.在生产构建的时候你可以去使用下面的插件，但是在项目的开发中不应该去使用，uglify-js-brunsh插件的安装能够在很大程度。下面就是使用两种不同的方法去进行安装uglify-js-brunsh

当你创建好了生产构建之后，在build后添加-p命名，需要记住的是，你在生产构建时谨慎使用，因为此命名会隐藏很多警告，并且使你的构建过程变慢

5.在最高效的Browserify产品构建中，安装几个插件。

为了确保你安装了产品构建，你应该增加了下面的这些转化

  1.envify转换确保设置了正确的构建环境。使其全局(-g)

  2.uglifyify转换移除开发导入。让它也全球化(-g)

  3.生成的包通过管道传输到uglify-js进行破坏。

6.为了获得更高效的Rollup产品构建，需要安装一下插件

为了确保安装了上面的这些插件，

replace插件确保设置了正确的构建环境。
commonjs插件在Rollup中提供了对commonjs的支持。
uglify插件压缩并破坏最后一个包。

7.webpack，如果你使用了create-react-app，你就不需要直接的去配置的你的react中的内容。下面是当时自己去搭建产品环境的时候需要去注意的，最高效的webpack的安装构建，必须确保有一下插件的安装，在产品的配置过程中。

注意：不应该在开发中应用UglifyJsPlugin或DefinePlugin和“production”值，因为它们会隐藏有用的反应警告，并使构建速度慢得多

8.使用Chrome performance选择卡来分析组件

目前只有Chrome、Edge和IE是唯一支持该功能的浏览器，使用它的好处就是你能够看到你的UI组件的更新速率，具体的操作办法是什么呢？

   1.关闭掉所有的扩展功能，尤其是react开发者工具 ； 2. 确保它被运行 ； 3. 打开谷歌的开发者中的选择卡，并且点击record；   4.执行配置的文件，注意配置时间不能够超过20s。否则浏览器会成为挂起状态 5.停止press record  6. 然后就会在审查页面出现各个组件的渲染成功的时间的快慢程度，这种程度是相对的，因为在实际上，渲染的速度会比你想的速度快很多。

9.使用Devtool工具去分析组件，在react-dom 16.5+和 react-native0.57+版本中，提供了这个功能

10.虚拟化一个长列表，如果你的程序要渲染一个长列表，推荐使用windowing，它的作用是在任意给定的时间内去渲染一小段行中组件，这样做的好处就是显著的减少了你的DOM节点加载的数量。react-window和react-vurtualized都是很受欢迎的windowing技术的第三方库。他们显著的为列表、网格和数据，提供了一些重要的组件使用。

11.避免掉一些不必要的渲染过程，对于react你需要明白一个新的概念"虚拟DOM",其可以理解为在渲染组件之前，将组件中的内容转化成一个虚拟DOM。其作用是当你第二次去渲染元素时，如果改变了第一次中的某一部分，通过虚拟DOM的DIFF算法就可以找出差异，进行新的渲染。这样做的好处就是大大的提高了你代码的运行速率。在这里还需要知道一个生命周期函数shouldComponentUpdata,在其之后是否还需要进行渲染的条件，如果其返回的是一个true那就就会进行渲染，如果返回的是一个false那么就不会进行渲染。因此在很多的时候，我们可以通过这个生命周期函数来实现一些不必要的渲染。例如下面的这个例子

在上面的代码中，仅仅检查的是props.color和state.count，如果你的props很多，这个时候可以使用PureComponent来实现浅比较，这样的话，会大大的提升项目的效率。注意：这个浅比较在使用react-redux时，你state中的值是不可改变的

但是对于更复杂的数据结构的时，你的使用PureComponent会使得你的代码运行出来的工作效率是不正确的

因为PureComponent在this.props.words中做的是一个浅比较，所以当words中的内容改变时，这种比较模式会认为你前后的虚拟DOM是一样的，因此就不会有任何的提示。

12.使用immutable数据结构，将你的state设置为不可更改的，因为在react中state是不能够去直接修改的，但是你在操作的时候，如果去更改了那么这个程序也不会报错，但是随着功能的复杂度越来越高，这样直接去更改的操作就会是程序在运行上出现很多的bug。此时如果你将你的state设置为immutable时，你就不能去直接的更改里面的数据，这样做的好处就是会避免很多bug的产生，也方便了数据的统一管理。

以上内容就是个人对于性能优化的一些认识。