zoukankan      html  css  js  c++  java
  • 围绕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函数式编程的一个优势。
  • 相关阅读:
    使用jq.lazyload.js,解决设置loading图片的问题
    Write your first jQuery plugin
    如何在Less中使用使用calc
    web页面在ios下不支持fixed可用absolute替代的方案
    JavaScript内存优化
    js监听文本框内容变化
    动态绑定事件on
    CSS秘密花园:多边框
    2020—2021—1学期20202405《网络空间安全导论》第一周学习总结
    2020—2021—1学期20202405《网络空间安全导论》第五周学习总结
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10507223.html
Copyright © 2011-2022 走看看