设为首页 加入收藏

TOP

前端迷思与React.js(二)
2017-10-10 13:55:46 】 浏览:2684
Tags:前端 React.js
做出漂亮的表单,把表单元素放置在div里面,他们根本不关心什么纯净或ES6。设计React组件仍然需要耗费大量的时间,因为JSX的可读性太差。还有一个不好的地方,就是你无法在HTML代码里使用普通的IF语句。React的忠实用户会告诉你说,有了三元运算,就不需要再使用条件判断了。不过我向你们保证,当你再次阅读或编辑这些代码时,你会发现它们仍然是HTML和JS的混合体,尽管它们可以被编译成纯粹的JS。

<ul>
       {items.map(item =>
         <li key={item.id}>{item.name}</li>
       )}
</ul>

    很多开发者认为这种严格的限制可以帮助我们写出更加模块化的代码,因为我们必须把代码块放到工具函数里,并在render()方法里调用,就像这个人建议的那样:
http://stackoverflow.com/a/38231866/1132016

    JSX甚至让我们不得不把15行的HTML代码分成3个组件,每个组件里包含5行代码。

    不要认为这种做法会让你成为更好的开发人员,你只是不得不这么做而已。

而事实其实是这样的:

    如果你正在开发一个相对复杂的组件,而你并不打算明天就把它发布到GitHub上,那么上述的方式只会拖你的后腿,特别是在你要解决真实的业务问题时。不过不要误会,我并不是说拆分成小组件就一定不好。

    你当然清楚通过拆分可以提升代码的可管理性和可重用性。但前提是,只有当业务逻辑实体可以被放到一个单独的组件里时才要这么做,而不是每写一个三元操作代码就要进行拆分!每次在创建新组件时都会让你和你的意识流付出一定的代价,因为你需要从业务思维(在你记住当前组件状态时,需要增加一些HTML代码让它运行起来)转换到“管理思维”——你需要为这个组件创建单独的文件,考虑如何给新组件添加属性,并把它们跟组件状态映射起来,还要考虑如何把回调函数传递进去,等等。

    你被迫使用这种过度且不成熟的组件模块化方式来编写代码,从而降低了编码速度,而从中得到的模块化可能并非你所需要的。在我看来,不成熟的模块化跟不成熟的优化没有什么两样。

    对于我来说,代码的可读性是非常重要的,不过是否能够从编码中获得乐趣也很重要。为了实现一个简单的计算器控件而去创建六个组件,这样的事情一点也不有趣。大多数情况下,这样做也不利于维护、修改或控件检修,因为你要在很多文件和函数间跳来跳去,逐个检查每一个HTML小代码块。再次强调,我并不是在建议使用单体,我只是建议在日常开发当中使用组件来替代微组件。这是常识性问题。

React里使用表单和Redux会让你忙得停不下来

    还记得吗,React的设计在于它的纯净以及干净的单向数据流。这就是为什么LinkedStateMixin不受待见,你需要为10个输入创建10个函数,而80%这样的函数只包含了一行this.setState()代码,或者一次redux调用(或许你还需要为每个输入创建一个常量)。如果只要在脑子里想想就能自动生成这些代码的话,或许还是可以接受的,但现在还没有哪个IDE可以提供这样的功能。

    为什么要敲这么多的代码呢?因为双向绑定被认为是不安全的,特别是在大型应用里。我可以肯定地说,双向数据流的代码可读性确实不是很好,而Angular 1的双向绑定更是糟糕透顶。不过,这些还算不上大问题。

    Redux看起来更像是啰嗦的代名词。开发人员抱怨Mobx把React变成了Angular,就因为它使用了双向绑定——可以参见之前讲到的第一点。似乎很多聪明人只是让他们的代码看起来更纯净,但是并没有完成更多的事情(不过如果你没有截止期限或许问题不大)。

过度的工具绑定

    React有点乱糟糟的。如果离开了一大堆npm包和ES5编译器,要做出React应用简直是寸步难行。基于React官方基础包开发的一个简单应用在node_modules目录下包含了大约75MB的JS代码。

这不算什么大问题,它更像是JS世界的事情,不过使用React仍然只会增加我们的挫折感。

当前状态

    v15.5.4 April 11, 2017

    Facebook正在以流行的java script框架React为基础开发一个全新的架构。这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。这一全新架构最初已于2016年7月公开发布,其中蕴含着过去多年来Facebook不断改进的工作成果。该架构可向后兼容,彻底重写了React的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。

最新动态

    2017年5月4日,Facebook开源团队技术作者Joel Marcey在Hacker News社区发布一则《Prepack帮助提高java script代码的效率》,引起了社区的广泛讨论

    官方宣称Prepack是一个优化java script源代码的工具,实际上它是一个java script的部分求值器(Partial eva luator),可在编译时执行原本在运行时的计算过程,并通过重写java script代码来提高其执行效率。Prepack用简单的赋值序列来等效替换java script代码包中的全局代码,从而消除了中间计算过程以及对象分配的操作。对于重初始化的代码,Prepack可以有效缓存java script解析的结果,优化效果最佳。

    React 16(正在开发中)是一次革新,但也使用了相同的公开API。对于Facebook所使用的超过30,000个(!)组件,其中只有少量需要改动,并且这少数组件主要被一些已经不再支持或没有正式记录在案的行为所使用。因此可以说完全可以保证99.9%的兼容性。这也让我们确信React 16基本上也可以直接适用于你的代码。

AngularJS

    在富应用开发中,跟Angular完全没得比,在同等熟练条件下,Angular开发效率=五倍React=三倍backbone=十倍jquery,然而虚拟dom并没有什么乱用,二十一世纪,效率为王,Angular万岁,它代表了前端最先进的生产力,代表了前端先进文化的前进方向,代表了最广大前端的根

首页 上一页 1 2 3 4 5 6 下一页 尾页 2/6/6
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【设计模式从零学—写在设计模式.. 下一篇- cinfiguration.resolve.extensi..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目