1. 声明式开发

react 是声明式的开发方式,与之对应的是命令式开发方式。之前用jquery写代码的时候,我们都是直接操作dom,这种我们称为命令式的编程。命令式编程需要我们一点点的告诉dom,它要怎么去做,怎样去挂载,即命令式编程则需要用算法来明确的指出每一步该怎么做。

react就是一个声明式的开发,声明式开发强调‘做什么’而不是‘怎么做’。react是面向数据编程的,只要把数据构建好就可以了。react会根据这个数据自动构建网站,也可以理解为,这个数据就是一张图纸,当图纸画好之后,react会自动根据图纸构建这座大厦。这种声明式开发介意节约大量的操作dom的代码。这是react的一个优势。

2. 可以与其他框架并存

使用react的时候,我们也可以使用jquery, vue 这样的框架。这是因为,在index.html文件中,react只管理id="root"里的代码的渲染,其他框架可以操作其他部分的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

3. 组件化

4. 单向数据流

父组件可以给子组件传值,但是子组件只可以使用这个值,绝不能改变这个值。想要改变这个值的话,只能通过调用父组件的方法去改变父组件的值。之所以设计这个单向数据流,是为了我们开发,测试方便,不容易遇到坑。

5. 视图层框架

react 负责的是数据和页面渲染之间的问题,至于组件之间怎么传值,react并不擅长。在小型项目中,父子组件通信可以通过react来完成,但在大型项目中,使用react通信对多级组件传值要经过层层组件,这样很麻烦,因此需要flux,redux这样的数据层框架来辅助我们开发。这样我们就能理解为什么react定义为视图层框架,而不是大型的完整的框架。

6. 函数式编程

我们在使用react编程时,其实写的都是一个个的函数,如 constructor,render等,都是一个个的函数。函数式编程有以下几个好处:

  • 容易维护
  • 更容易实现前端自动化测试

react 的优点的更多相关文章

  1. react的优点:兼容了dsl语法与UI的组件化管理

    react的优点:兼容了dsl语法与UI的组件化管理. 组件化管理的dsl描述 UI: 虚拟dom:

  2. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  3. 对react的几点质疑

    现在react.js如火如荼,非常火爆,昨天抽了一天来看了下这项技术.可能就看了一天,研究的不深入,但是我在看的过程中发现来了很多疑惑,这里拿出来和那家分享讨论以此共勉. 在我接触的前端以后,让我感觉 ...

  4. React + Reflux

    React + Reflux 渲染性能优化原理   作者:ManfredHu 链接:http://www.manfredhu.com/2016/11/08/23-reactRenderingPrinc ...

  5. React vs Angular 2: 冰与火之歌

    黄玄 · 3 个月前 本文译自 Angular 2 versus React: There Will Be Blood ,其实之前有人翻译过,但是翻得水平有一点不忍直视,我们不希望浪费这篇好文章. 本 ...

  6. React快速入门教程

    简介 Facebook官网介绍:React 是一个用来构建用户界面的 JavaScript 库.相当于 MVC 架构的 V 层. React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状 ...

  7. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  8. 第一个react

    个人觉着react和vue是很相似的,之前还转载过一篇介绍两个异同点的文章,那个时候还完全不懂react,现在才慢慢开始接触,所以只能总结一些个人的心得,首先自然是react的优点了,个人觉着主要有以 ...

  9. vue、react、angular三大框架对比 && 与jQuery的对比

    前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢?  这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...

随机推荐

  1. Vue | 指令实现自动翻译填充英文名功能

    背景:应用系统中存在多个创建实体表单,表单填写时,在填写中文名称后,要填写对应的英文名作为标识或数据库查询索引. 需求:填写中文名的同时,系统自动生成英文名并填充到表单中,辅助用户操作,节约操作时间. ...

  2. [刷题] PTA 04-树4 是否同一棵二叉搜索树

    程序: 1 #include <stdio.h> 2 #include <stdlib.h> 3 typedef struct TreeNode *Tree; 4 struct ...

  3. Linux_网络进阶管理

    一.链路聚合 1.什么是链路聚合? 网卡的链路聚合就是将多块网卡连接起来,当-块网卡损坏,网络依旧可以正常运行,可以有效的防止因为网卡损坏带来的损失,同时也可以提高网络访问速度. 2.链路聚合方式: ...

  4. Ubuntu 18.04安装 Adob Flash player

    1.Ctrl + Alt + T 打开命令终端,启用Canonical Partners Repository存储库 (最新的Flash插件位于Canonical Partners的存储库中,默认情况 ...

  5. Java JOptionPane 对话框

    如果你对 Java 控制台界面下的输入数据和打印输出结果感到有些乏味和厌倦,希望能够像其他计算机软件一样有一个 GUI 界面(图形用户界面). 那么 JOptionPane 对话框也许会让你眼前一亮, ...

  6. BLDC 无刷电机FOC驱动 STM32官方培训资料

    STM32 PMSM FOC SDK V3.2 培训讲座一http://v.youku.com/v_show/id_XNTM2NjgxMjU2.html?from=s1.8-1-1.2STM32 PM ...

  7. 网络模型mAP计算实现代码

    网络模型mAP计算实现代码 一.mAP精度计算 这里首先介绍几个常见的模型评价术语,现在假设我们的分类目标只有两类,计为正例(positive)和负例(negtive)分别是: 1)True posi ...

  8. ieda引入jstl后报错解决办法

    报错如下: HTTP Status 500 - The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in ei ...

  9. ApplicationListener接口,在spring容器初始化后执行的方法

    一.如果我们希望在Spring容器将所有的Bean都初始化完成之后,做一些操作,那么就可以使用ApplicationListener接口,实现ApplicationListener接口中的onAppl ...

  10. QT环境变量设置

    首先找到自己对应的目录 我的如图 还有一个路径 将这两个路径添加到系统变量的Path中