围绕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一份。

react是一个视图层的框架

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

react之中的函数式编程

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