1. Props & onChange 的原罪 。「props & onChange 接口规范」它不是一个典型的「程序接口规范」。

    1. 当你拿到一个可视组件的 ref,却没有类似 setProps() 这样的方法来改变其 props,你只能在 render() 方法中,通过 jsx 语言来设置其 props。这意味着父元素必须保存并维护这个 props 对应的值,而更多时候,父容器只是想一次性的设置一个值,然后就走,让以后的事情交给子元素自己去维护。当然,你也可以通过 ref 来获取子元素的应用,然后调用其成员方法来达到一次性改变属性的目的,但又会带来其他问题,请看下一条。
    2. 在大多数客户端框架里,有一个视图类 ComponentAcompA = new ComponentA()compoA 即是对这个可视组件的表示。而,在 React 世界里,compA.render() 返回的结果(结果的结构参见下图),才是这个可视组件的表示。这种不同带来的后果是,我们很难对已经渲染过的节点进行后续更改。当然 React 提供了 React.cloneElement(element,props) 接口来改变,但是这个接口怎么看都不像一种正派的接口,而像是。。。hack。因为这种改变,其他人时候很难看懂的。换句话说,我们不是通过一个明确定义的接口,而是“随性的”,“肆无忌惮”的修改了内存。

      render() 函数返回的结果

    3. React 用 props & PropType 的方式重新定义了一种接口规范,定义了一个组件的输入和输出。输入 props 一般是 string, boolean, number, object;输出参数一般是 functionPropType 定义了每个 props 的取值范围、 是否必填等信息。这整个一套机制是跟面向对象语言里的 interface 的功能是高度重合的,也就是说,React 重新发明了轮子。并且这个轮子有自己很大的局限性:他不是能自表达的。什么意思呢?在典型的面向对象语言里(以 java 为例), 假设有一下代码:

      1
      2
      3
      4
      5
      6
      inteface IRunable{
      run();
      getSpeed();
      } function clone(IRunable){}

      这段代码里的 clone 函数的第一个参数必须满足 IRunable 接口,否则编译器会抛出编译错误。但是,切换到 props 接口规范,假设我们定义了一个对象的接口:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const SomePropType = PropType.shape({
      name: PropType.string.isRequired,
      uuid: PropType.stirng.isRequired,
      onChange: PropType.func.isRequired,
      }); function clone(element){}. // element 是一个必须满足 SomePropType 接口的元素。 const AnotherPropType = PropType.shape({
      elment: ???how??? // 一个必须满足 SomePropType 接口的元素。
      })

      你没办法定义一个 clone 方法,限制它的第一个参数必须是满足某个 PropType 定义的组件对象;甚至,你也没办法定义一个接口 AnotherPropType,使得它的某个属性满足 SomePropType

  2. Controller 和 View 融为一谈。React 本身是一个 View 层的工具,他最擅长的是把数据 render() 成 dom 元素。在 Android SDK 里,有一个东西跟它的功能很相似: layout xml。但是在 React 的设计理念里,没有对 view 和 controller 的明确的概念的区分。我们可以在 Component 里做 view 层该做的事情(根据给定数据显示界面),也可以做 controller 应该做的事情(处理交互动作、处理网络请求)。以至于有很多博客来“教” React 的开发者来明确分这两个概念,参考博客Presentational and Container Components。当然你可以说,这是开发者自身素质和抽象能力的体现,但是作为一个使用量如此巨大的框架,官方居然没有为用户构造和区分这个概念,还要用户自己去发现和总结,不得不说,是一大黑点。

[react] 细数 React 的原罪的更多相关文章

  1. 细数iOS上的那些安全防护

    细数iOS上的那些安全防护  龙磊,黑雪,蒸米 @阿里巴巴移动安全 0x00 序 随着苹果对iOS系统多年的研发,iOS上的安全防护机制也是越来越多,越来越复杂.这对于刚接触iOS安全的研究人员来说非 ...

  2. 细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一

    细数.NET 中那些ORM框架 —— 谈谈这些天的收获之一(转) ADO.NET Entity Framework        ADO.NET Entity Framework 是微软以 ADO.N ...

  3. 细数Qt开发的各种坑(欢迎围观)

    1:Qt的版本多到你数都数不清,多到你开始怀疑人生.从4.6开始到5.8,从MSVC编译器到MINGW编译器,从32位到64位,从Windows到Linux到MAC.MSVC版本还必须安装对应的VS2 ...

  4. 迄今最安全的MySQL?细数5.7那些惊艳与鸡肋的新特性(上)【转载】

    转自: DBAplus社群 http://www.toutiao.com/m5762164771/ 迄今最安全的MySQL?细数5.7那些惊艳与鸡肋的新特性(上) - 今日头条(TouTiao.com ...

  5. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  6. 细数Python Flask微信公众号开发中遇到的那些坑

    最近两三个月的时间,断断续续边学边做完成了一个微信公众号页面的开发工作.这是一个快递系统,主要功能有用户管理.寄收件地址管理.用户下单,订单管理,订单查询及一些宣传页面等.本文主要细数下开发过程中遇到 ...

  7. React Native & react-native-web-player & React Native for Web

    React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...

  8. React笔记:React基础(2)

    1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...

  9. [React] 从零开始的react

    组件 1. 无状态组件 在React中,组件的名字必须用大写字母开头,而包含该组件定义的文件名也应该是大写字母(便于区分,也可以不是). 无状态组件是纯展示组件,仅仅只是用于数据的展示,只根据传入的p ...

随机推荐

  1. 谈谈我对php通信的理解及人生小感

    故事背景: 小王和小甜是亲密无间的好朋友. 小王到自己QQ群里看到一个免单活动, 自己支付宝余额不足, 遂用小甜的手机淘宝先花150元购买了活动产品. 到货后商家告诉小王, 确认收货后提供旺旺账号.支 ...

  2. 深入Javascript之this

    前言 近期准备好好的读一读<你不知道的JavaScript(上卷)>这本书,俗话说的好,好记性不如烂笔头,读到this这章感觉是时候需要一些笔记了.文中如有错误之处,欢迎指出. 什么是th ...

  3. Linux入门(5)——Ubuntu16.04安装网易云音乐

    去网易云音乐官网下载deb包: http://music.163.com/#/download 打开终端: cd 下载 .0_amd64_ubuntu16..deb sudo apt-get -f i ...

  4. [NOIP2014][DP]飞扬的小鸟

    [NOIP2014]飞扬的小鸟 ——!x^n+y^n=z^n 题目描述: Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画 ...

  5. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  6. 【ASP.NET MVC 学习笔记】- 18 Bundle(捆绑)

    本文参考:http://www.cnblogs.com/willick/p/3438272.html 1.捆绑(Bundle),一个在 View 和 Layout 中用于组织优化浏览器请求的 CSS ...

  7. JS中OOP之模拟封装和继承和this指向详解

    大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...

  8. LeetCode 665. Non-decreasing Array (不递减数组)

    Given an array with n integers, your task is to check if it could become non-decreasing by modifying ...

  9. 使用PHPExcel-1.8实现导入

    //使用PHPExcel-1.8实现导入(下载PHPExcel-1.8):导入excel 后缀名必须是.xls1.<form method="post" action=&qu ...

  10. PyQt5安装目录中找不到designer.exe与pyrcc5.exe

    我安装的是PyQt5的5.9版本,在安装目录下找不到designer.exe文件.在摸索一段后发现5.9版本对库文件和相关的开发工具是分开发布的.QtDesigner是在pyqt5-tools的包里. ...