对react vd 性能的理解

相信大家都知道react vd的性能是很好的，速度挺快的，真实dom操作很慢的，但是结果完全相反；

后来我就做了个测试，从两个方面去测试，在页面初始渲染1w条数据，react渲染耗时超过了1秒 在1200毫秒左右，而原生使用拼接字符串然后使用innerHTML进行添加到文档，耗时几十毫秒 在35毫秒左右；仅仅也就是一个循环的耗时；

 

另外一个测试是在上面的数据渲染完后，给每一项绑定单机事件，然后事件触发后更改当前的标题内容，react耗时 300毫秒左右，如果我用原声的去更改就是直接修改当元素的标题了，耗时可想而知了，基本可以忽略了吧。

 

当前react这个的耗时结果是可以进行优化的，然后我提出一个子组件，然后在子组件上使用了shouldComponentUpdate 方法进行了优化处理，只在标题改变的时候才进行渲染子组件，测试后耗时有所提升  耗时为 250毫秒左右，提升了60-80毫秒；

 

出现这样的结果是为什么呢？

首先react更新dom是通过操作数据改变的，然后进行vd的diff后在进行更新到页面，而原生的操作是直接操作的节点，速度到底哪个快很明确了吧；

那react的使用到底解决了什么问题呢？

react最直接的就是帮我们屏蔽了对dom的操作，让我们用组件化和声明的方式去编码，让我们的代码更加的容易维护。而如果我们用原生代码去操作dom，如果代码不进行优化和处理那性能也很是问题，而且后期的维护的成本也是很大的，

项目慢慢发展变的很大，性能问题会逐步显现，但是每个点都去优化又不是那么现实。而react框架的特性是数据驱动视图，底层已经对性能做了处理，在不需要我们进行手动处理的情况下依然可以给我们一种差不多的性能，是能被用户接受的性能，当然我上面的测试是一种特例，

实际中也不会有一次渲染1w条数据的，框架解决的最大问题就是后期的维护的问题，同时也提供了过的去的性能，不然这么多大厂也不会使用他了。

 

其实要学习react 如果对框架有更多的了解的话，可能后面的学习会顺畅，很多谜团都会自然解开。