欢迎光临
我们一直在努力

React.11 围绕react衍生出来的思考

声明式开发

首先react是声明式的开发方式,这个与之对应的是命令式开发方式,之前在用jquery写代码的时候,都是直接来操作dom,直接操作dom的这种编程方式,我们把他叫做命令式的编程,也就是我要创建一个页面,我要一点点的告诉dom,你要怎么去挂载,怎么去渲染,这种编程方式我们叫做命令式的编程。回头想想,我们代码里面有60%到70%的代码都在对dom进行操作。

那什么是声明式的代码,其实react就是一个声明式的开发。可以这么理解,假设我要去盖一栋楼,把这栋楼理解成一个网页,用jquery写的时候需要去告诉他这栋楼需要一步一步怎么去盖,先盖什么,再盖什么,每一步都要去关心。react不是这样的,react是面向数据来编程的,他只要把数据构建好就可以了。react会根据这个数据自动去构建这个网站,也可以理解成这个数据是个图纸,当图纸好了的时候,react会自动根据图纸去构建这个大厦。帮助构建整个页面的dom。这种声明式的开发可以节约掉大量的操作dom的代码。这是react编程带来的第一个优势

可以与其它框架共存

react编程的过程中,可以使用jquery,vue这样的框架,与这些框架可以完美的并存,那怎么才能做到公共使用,react才能不去影响到其它框架的代码呢。我们在app.js里面,dom挂载到了root的节点上。也就是react他只去管理index.html下面,id为root的div下面的代码。下面的dom跟react一点关系也没有。所以可以引用jquery操作下面的dom,只要不用jquery去操作id为root下面的内容就可以。这个时候jquery和react是可以共存的

组件化

单向数据流

父组件可以给子组件传值,但是子组件只可以使用这个值,绝对不可以去改变这个值。一旦改变了,react会报一个错误出来。Cannot assign to read only property 'list'。什么意思呢。list是只读的,这就是单向数据流。
之所以设计这个单向数据流,是为了我们开发,测试方便,不容易遇到坑。举个例子,假设父组件有5个子组件,list可以传递给这5个组件,假设没有单向数据流,某个子组件删除了list,那么其它4个组件都会受到影响。那一旦出现bug,就需要去找哪里改了list。每个组件一个个去看。这样调试非常不方便。如果一定要修改,copy一份。

视图层的框架

都知道,父子组件可以进行一个传值,假设我的一个项目极其的复杂。父组件有儿子1,儿子2,儿子1有孙子1,孙子2。儿子2有孙子a,孙子b。这个时候孙子1要给孙子a传值,如果还根据父子组件属性,然后子组件调用方法的传值的方式,就会疯掉了。本来两个组件的通信,结果中间儿子1,父组件,儿子2都要参与到这个组件里面来。很麻烦。
所以在开发大型项目的时候,光用react的时候是不行的。还要配合一些数据层的框架。帮我们解决react之间复杂传值的问题。这个时候react就把自身定义为视图层的框架。我并不是什么问题都解决,我就帮助解决数据和页面渲染之间的问题。至于组件之间这么传值,我并不复杂,我交给其它组件来做。在小的项目中,光用react就可以,比如todolist,就两层组件,光用react内部机制就可以解决。在大型项目里,单单来使用是不够的。就需要比如flux,redux这样的数据层框架来辅助我们的开发。到这就能理解为什么react定义为视图层框架,而不是大型的完整的框架。

函数式编程

我们在编写react的时候,其实写的都是一个个函数,constructor,render,handleClick,都是一个函数一个函数的写法。react的函数式编程带来了几个好处。首先维护起来比较容易,当一个函数比较大的时候,可以进行拆分,每个函数各司其职,这是最基础的一个优势。第二个是什么呢?我们现在前端届有个面向测试的一个流程,什么意思呢,很多前端的项目,现在已经引用了自动化测试的这样一个概念,在做前端自动化测试的时候,如果你的一个项目之中,代码的组成都是一个个函数组成的话,那么做自动化测试的时候就非常容易进行测试,只要给一个函数一个输入值,看一下输出是否符合我的预期,我就能知道这个函数是否运行的正确,他给前端自动化测试带来很大的便捷性,这也是react函数式编程的一个优势。

赞(0) 打赏
未经允许不得转载:散人研 » React.11 围绕react衍生出来的思考
分享到: 更多 (0)

评论 抢沙发

9 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏