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

在我接触的前端以后,让我感觉眼前一亮的有一个框架,一种思想。一个框架就是jquery,解决了浏览器兼容问题;一种思想就是mvvm,真正的让前端从docment操作中脱离出来,但是当时没找到很中意的框架,就自己造了一个轮子。

react的设计有几点我是不理解的:

流式绑定

  在mvvm框架设计中,有一个难点就是局部刷新,因为要更新我们的数据模型的时候我们必须要找到对应的docment节点来,以此来更新我们的视图

如上图,所以我们在内存里必须维护一个docment节点树,维护这个节点树是比较麻烦的,但是流式渲染却不需要维护这个节点树。因为每次更新都是重新渲染页面,但这样做是很耗性能的,所以react搞了一个虚拟节点,他的渲染就变成了这样

这里多出了一步“对比” ,所以那些传言react的性能比angular高,我一直持怀疑态度,怎么多出了一步还会高?,有兴趣的可以自己测试一下,或许里面有什么“不可告人的秘密” :),如果真是这样,那倒是真的值得研究一下他的源码,看看到底是哪路神仙造成性能提升,

流式绑定的缺点:使双向绑定变得困难,下面看下为什么变困难

传统的的双向绑定的难点

上图中有三个值为xxx文本框,当焦点在第一个文本框的时候我们通过输入来改变文本框的值,这时候会触发渲染事件,第二个文本框和第三个文本框会被渲染,会避开第一个文本框不渲染,原因?

1.因为我们在第一个文本框输入的值,这个就是最近的值 不需要渲染

2.如果第一个文本框也渲染,那就在某些浏览器中无法输入中文或者光标的位置跑到输入框前面

但是,流式渲染很难做到精确控制,所以使我们的双向绑定变的困难;

当然这个问题也不是没有解决方案,我只是说这里增加了我们实现双绑定的难度

React编译的最初的目的是掩盖html写在js里这件丑陋的事

把html片段写在js里面的痛苦想必大家都有体会,react也是把html写在js'里;但是我们的react为了为了使这件事情看起来没那么糟糕,搞了编译这么个东西;这样我们写在js里的代码看起就没那么糟糕。但是我们的编译只做这件事似乎把设计react的工程师的心里想法暴露了,所以这个编译也能把es6 编译为es5,这样在es6的炒作下,

就掩盖了编译的最初的目的是掩盖html写在js里这件丑陋的事,当然facebook的工程师也许不这样想,或许我的猜测不对,但无论怎么样在js里写html代码总是一件不好的事

上面是我对react的两点疑惑,当然他的组件化开发是值得称道的,设计的很优秀,但是组件化开发是个双刃剑有利有弊,具体的根据业务。

综上所述:在react的传播中,在人们的对es6和组件化开发的追逐中,react的优点被无限放大,而缺点被掩饰了。但是无论是es6还是组件化开发,都是双刃剑,至少在前端开发中,暂且不论nodejs

对react的几点质疑的更多相关文章

  1. 一个资深iOS开发者对于React Native的看法

    一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道.   我认为一个js开发者可以使用javasc ...

  2. [转] 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  3. 大神眼中的React Native--备用

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...

  4. 【前端单元测试入门02】react的单元测试之Enzyme

    React项目的单元测试 React的组件结构和JSX语法,对上一章的内容来讲进行测试显得很勉强. React官方已经提供了一个测试工具库:react-dom/test-utils 只是用起来不够方便 ...

  5. React 16 加载性能优化指南

    关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...

  6. 移动端跨平台方案对比:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  7. 最火移动端跨平台方案盘点:React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  8. React 源码剖析系列 - 不可思议的 react diff

      简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...

  9. [翻译]Review——24 tips for React Native you probably want to know

    Post author: Albert Gao Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you- ...

随机推荐

  1. RabbitMQ入门教程——.NET客户端使用

    众所周知RabbitMQ使用的是AMQP协议.我们知道AMQP是一种网络协议,能够支持符合要求的客户端应用和消息中间件代理之间进行通信. 其中消息代理扮演的角色就是从生产者那儿接受消息,并根据既定的路 ...

  2. PHP非阻塞模式 (转自 尘缘)

    让PHP不再阻塞当PHP作为后端处理需要完成一些长时间处理,为了快速响应页面请求,不作结果返回判断的情况下,可以有如下措施: 一.若你使用的是FastCGI模式,使用fastcgi_finish_re ...

  3. MySQL创建和操作数据库表demo

    [1]建立员工档案表要求字段:员工员工编号,员工姓名,性别,工资,email,入职时间,部门. [2]合理选择数据类型及字段修饰符,要求有NOT NULL,auto_increment, primar ...

  4. linux面试题

    一.填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取uu要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 ...

  5. CentOS7 (64位) 下QT5.5 连接MySQL数据库(driver not loaded)

    用qt连接MySQL需要共享库 libqsqlmysql.so的驱动,路径在plugin/sqldrivers目录下,乍看已经可用了,其实不然. 用ldd命令分析一下,libmysqlclient_r ...

  6. [转]android 获取视频帧

    本文转自:http://blog.csdn.net/heart_Moving/article/details/17414067 今天做Android视频文件解码,需求:从一个视频文件获取到一帧一帧的图 ...

  7. plain framework 1 参考手册 入门指引之简介

    简介 简介 能做什么? LINUX WINDOWS 简介 简约框架(plain framework)是一款基于C/C++开发的,跨平台(windows/linux)应用的基础框架,开发者可以利用此框架 ...

  8. NOIP2009pj道路游戏[环形DP 转移优化 二维信息]

    题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 n 个机器人工厂编 ...

  9. java 解决中文乱码

    //1.代码解决 public class LuanMa { public static String getNewString(String luanma){ String result = &qu ...

  10. AC日记——画矩形 1.5 42

    42:画矩形 总时间限制:  1000ms 内存限制:  65536kB 描述 根据参数,画出矩形. 输入 输入一行,包括四个参数:前两个参数为整数,依次代表矩形的高和宽(高不少于3行不多于10行,宽 ...