关于react的思考

2022-08-15 08:27:17 浏览数 (1)

react作为全球使用人数最多的前端框架,究竟有什么特点呢?本人总结归纳出以下6点:

1. 声明式开发

react作为新一代流行的前端框架自然与旧一代流行的框架jquery有所不同。jquery以封装了大量的dom操作api著称,我们写完一个jquery构建的项目我们会发现其实页面60%都是在做dom的获取,这就是命令式编程。react则是数据驱动,改变视图就是声明、操作数据即可。用jquery做页面好比我们要建一座大楼,我们必须手把手地教工人怎么一块一块砌砖成墙,要关注许多细节才能把楼建成;而react则是做一张设计图,工人就按这个设计图按部就班地建楼。这是既简单高效的做法(当然也不可否认jquery的优势,其做复杂交互以及兼容浏览器方面是难以取代的)

2. 可以与其他框架共存

在react中,其有一个根元素,比如是id为root的div,包裹了所有的元素,react只负责这块内容的dom渲染,我们可以在这个根元素同级再创建一个div,这个div内的内容则可以引入jquey,两者互不影响

3. 组件化

react中推崇组件化开发,把页面拆分成许多小块,css、js互不影响,大大提高了复用性与简洁性

4. 单向数据流

组件化就难免遇到传值问题,单向数据流指的是只能父组件传递给子组件数据,子组件无法更改父组件的数据。若不是单向,可以试想,当我们一个父组件对应5个组件时,这5个组件都改了父组件的数据,我们要如何判别?react增加这一限制无疑大大提高了代码的可维护性

5. 视图层框架

在小型项目中组件比较少,父子组件隔的层数比较少,相互传值比较直接,但在大型项目中数据就难以维护了![组件传值](https://upload-images.jianshu.io/upload_images/4573742-c6c0d250c439c242.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

就像上图,一个圆圈代表一个组件,紫色组件要传递数据给箭头所指的组件就要先传递数据给他的曾祖父组件,曾祖父在他的孙子组件,这样传递数据会有很多冗余代码也很复杂,无疑会令人很崩溃。因此就需要借助数据层组件比如redux,就像vue中的vuex一样做全局数据状态管理

6. 函数式编程

react用了jsx语法,组件中代码都是放在一个个函数中的,这样即可将复杂的代码拆分成一个个函数,不会混杂到一块,很简洁方便维护。现在也推崇测试式编程,就是引入自动化测试,函数输入参数返回预期值则测试通过,函数式编程则跟这个十分吻合

存在即合理,react框架展示了许多优秀的编程思想,值得我们细细品味。这是本人的一些关于react的理解思考,在此做笔记,刚刚过去的秋招也遇到很多面试官会问所使用的vue、react、jquery的区别,现在想想就是要考察我们对框架是否深入理解,只有深入理解了才知道在什么场景用更合适高效,勤做总结,有利于面试更有利于理解。

0 人点赞