react总结

时间:2021-09-28 19:41:46

在我的工作用到的最多就是backbone,其次还会有ember/Ext,backbone目前能实现我们team所需要实现的功能,因为我们的component不需要频繁的操作Dom,当后台API返回数据之后,就刷新整个component,就没有必要去用react 里面的虚拟dom 去实现了。但是后来有个新的需求,需要做一个频繁操作DOM的setting component,这是用backbone就完全体验不到backbone能带来的便捷,还是需要在整个DOM渲染完成之后,去获取DOM 节点,然后操作DOM节点,这样很耗性能。不过还好,我们的team对于这种需求还是比较少了。

下面不得不提为什么那么多team选择用react去开发他们的产品,react在那些方面有提升呢?

React 是一个用于创建可复用,可聚合的web component 的js库。React是提供了MVC中的V层,并不是一个完整的MVC框架。

1.组件化,而不是写一大堆的HTML模板

  react将js逻辑和HTML标签封装到一起,使js和html紧密连接,有助于理解。

  在backbone/angalur里面都是需要template进入一个html模板,但是react只需要一个render方法,把html 作为render的返回值就行了

2.单向数据流(unidirectional data flow)

  单向数据流听起来很低级,没有双向数据流那么高级。但是react为什么选择用单向数据流呢?

  单向数据流和之前angular提出的two way data binding想比较而言,使各种变化变得可预计、可控制的。不会向two way 打他binding那样,变化一旦复杂起来,大家相互触发变化,到最后一个地方变 了,你根本猜不出来还会导致其他什么地方跟着变,这对一个team来学,学习成本也是很大的。react还提供了不可变数据,大大的节约了脏检查的消耗。那么还有其他的好处,比如:

  每个组件是干啥的,很直观

  结果更加可预测

  组件之间的关系更加清晰

  没有确切的DOM操作

  不再有数据模型的肮脏检查

  react单向特性导致数据一旦更新,就会渲染整个app,这样听起来好像也是挺低级的,渲染这个app也是耗性能的。但是当你创建一个很复杂的组件的时候,去管理UI的状态就不是一件简单的事情了。

  通常管理UI的状态需要以下几步:

    1.接受用户的输入

    2.异步API数据请求

    3.修改数据

    4.修改DOM

分析到这里,发现我们项目用的backbone完全可以被替代掉。

比较一下backbone和react渲染

  backbone:

    1.浏览器请求页面

    2.服务器请求数据库

    3.将数据传给模板

    4.模板渲染页面

  react:

    1.用户输入

    2.从API获取数据

    3.将数据传给顶层组件

    4.React将每个组件渲染出来

3.虚拟DOM Tree

  Js虽然很快,但是dom操作很慢。

  React在每一个更新时,都活重建DOM tree,找到与上一个版本的DOM的差异,计算出最新的DOM更新操作,然后从草最队列中批量的执行更新DOM操作

  React的jsx使react的代码更易懂

4.React可以在服务器端渲染(这个还么有实践过,只是知道可以在服务器端渲染)

  1.支持SEO关键字收录

  2.用户访问不需要等待过程的loading动画

  3.支持同构

  4.支持更多的后端如nodejs模板

  

(这只是当前阶段的一个简单理解,后续还会有更新。。。。)