为什么 ReactJS 不适合复杂的前端项目? (查看原文)

《More than React》系列的文章会一共分为五篇。本文是第一篇,介绍用ReactJS开发时遇到的种种问题。后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Bindi...

insights.thoughtworkers.org  by 杨博  
评论 (27)
Thumb

平锅 2016-08-18 08:57

难道你只用react?不配合其他框架?
Thumb

niunan 2016-08-18 09:00

支持支持
Thumb

熊建刚 2016-08-18 09:20

第一次看见说react 的 dom diff算法慢
Thumb

东东同學_ 2016-08-18 09:42

react 全家桶可以试试
Thumb

eggggger 2016-08-18 09:49

虽然对react无感,但感觉作者在瞎黑,react靠的是它的生态,是社区提供的一整套解决方案。react 适合的就是需要多人协作开发维护的大型复杂系统。
Thumb

dodospace 2016-08-18 10:13

感觉作者有点以偏概全了,个人认为React不是一个完整的框架,而是一个View库,作者文中说到的一些问题其实是可以通过其他库去解决的,不过也会去看看作者的scala.js。
Thumb

yes2yew1eb 2016-08-18 12:46

辣鸡作者,不动装懂
Thumb

u189313 2016-08-18 14:36

react核心价值就是view,外联逻辑有很多现成的解决套路,在复杂系统中直接传递callback本来就是下下之策,而且这与react也没太大关系
Thumb

yuechen323 2016-08-18 17:44

都是真爱粉 好好看看作者说的对的地方 喷啥啊 作loser吧
Thumb

记忆里的那株向日葵 2016-08-18 20:53

呵呵…
Thumb

nerdiverse 2016-08-19 03:39

哈哈
Thumb

hustcc 2016-08-19 08:21

头条推荐的时候也不能按照文字数量…
Thumb

u175991 2016-08-19 08:22

虚拟dom那块说的有问题,每次state改变就会执行一次render方法,这个没错,但这不是虚拟dom。虚拟dom的diff算法是用在react渲染真实dom时。而且就刚才的state微小改变导致render也是有办法的,在shouldComponentUpdate函数里进行优化,具体的可以查下shalowCompare和immutablejs
Thumb

JingkaiZhao 2016-08-19 09:46

为了黑而黑……
Thumb

u271028 2016-08-19 12:45

傻逼
Default avatar

祁幽小贵 2016-08-19 17:03

用redux管理事件还是不错,数据流处理所有框架都会存在问题,这是js功能决定的,先学透彻再来黑吧
Thumb

u267891 2016-08-20 19:22

撸主不能因为需求不能满足而黑react,没有万能的框架,配合其它实现就好
Thumb

honoka 2016-08-21 02:02

噗,为了推荐自己的框架,强行黑一把React
Thumb

u268820 2016-08-26 22:46

我是这篇文章的作者杨博。今天同事说开发者头条转载了我们的文章,让我过来回复一下。 @Yubin Duan:我理解React渲染时一共分为三层。 第一层是render函数中创建的ReactElement,这是个重复创建的轻量级数据结构,供ReactJS框架的虚拟DOM差分算法比较是否变更,我会在本系列第三篇文章《虚拟DOM已死?》把虚拟DOM差分算法和Binding.scala的精确数据绑定机制比较一下。 第二层是ReactComponent,这是可以复用的有状态组件,比较重量级。我会在本系列第二篇文章《组件对复用性有害?》比较组件和Binding.scala的轻量级复用单元。 第三层是浏览器的DOM,被ReactJS框架隐藏起来,前端程序员不能直接操纵。 “虚拟DOM”这个词,我们一般是指第一层。 您可能把第二层ReactComponent理解成了虚拟DOM。虽然您这样的定义也是自洽的,但可能和公认的定义不同。 @惊鸿三世:react 的 dom diff算法我会在本系列第三篇文章《虚拟DOM已死?》中和Binding.scala的精确数据绑定机制做一次全面的对比。请到时候关注一下。 @祁幽小贵:我不明白您说的数据流处理是什么意思,麻烦您说得详细一点。 @平锅 、 @东东同學_ 、 @Koo 、 @dodospace 、 @is :我同意你们所说的,我也觉得ReactJS本身只包含视图部分功能。需要额外掌握 react-router 、 Redux 等第三方库才能实现完整的前端项目。相比之下,Binding.scala提供的是完整的前端开发解决方案。比如Binding.scala内置的bind功能就可以实现极为灵活的路由功能(参见 https://github.com/ThoughtWorksInc/todo/blob/8fb2839/js/src/main/scala/com/thoughtworks/todo/Main.scala#L41 )。此外,这个系列的文章的第五篇会比较ECMAScript 2015基于Promise的异步编程和Binding.scala的远程数据绑定。这些都不仅仅只是React一个View层的问题。 @yes2yew1eb 、 @工具分享 、 @Jingkai Zhao 、 @大牛 、@明月清风 、 @honoka :我并不知道该怎么回复您们的评论。也许您们可以给出一些给具体的反馈,如果您们有空读完文章的话。谢谢!
Thumb

u268820 2016-08-26 22:51

开发者头条这个网站的转载很规范,不错!不像某些网站把作者名字都删了。不过我觉得如果保留我回复的原始段落格式就更好了。为了方便同学们阅读,我重新发一遍。
Thumb

u268820 2016-08-26 22:51

@Yubin Duan:我理解React渲染时一共分为三层。 第一层是render函数中创建的ReactElement,这是个重复创建的轻量级数据结构,供ReactJS框架的虚拟DOM差分算法比较是否变更,我会在本系列第三篇文章《虚拟DOM已死?》把虚拟DOM差分算法和Binding.scala的精确数据绑定机制比较一下。 第二层是ReactComponent,这是可以复用的有状态组件,比较重量级。我会在本系列第二篇文章《组件对复用性有害?》比较组件和Binding.scala的轻量级复用单元。 第三层是浏览器的DOM,被ReactJS框架隐藏起来,前端程序员不能直接操纵。
Thumb

u268820 2016-08-26 22:51

@Yubin Duan: “虚拟DOM”这个词,我们一般是指第一层。 您可能把第二层ReactComponent理解成了虚拟DOM。虽然您这样的定义也是自洽的,但可能和公认的定义不同。
Thumb

u268820 2016-08-26 22:51

@惊鸿三世:react 的 dom diff算法我会在本系列第三篇文章《虚拟DOM已死?》中和Binding.scala的精确数据绑定机制做一次全面的对比。请到时候关注一下。
Thumb

u268820 2016-08-26 22:51

@祁幽小贵:我不明白您说的数据流处理是什么意思,麻烦您说得详细一点。
Thumb

u268820 2016-08-26 22:52

@平锅 、 @东东同學_ 、 @Koo 、 @dodospace 、 @is :我同意你们所说的,我也觉得ReactJS本身只包含视图部分功能。需要额外掌握 react-router 、 Redux 等第三方库才能实现完整的前端项目。相比之下,Binding.scala提供的是完整的前端开发解决方案。比如Binding.scala内置的bind功能就可以实现极为灵活的路由功能(参见 https://github.com/ThoughtWorksInc/todo/blob/8fb2839/js/src/main/scala/com/thoughtworks/todo/Main.scala#L41 )。此外,这个系列的文章的第五篇会比较ECMAScript 2015基于Promise的异步编程和Binding.scala的远程数据绑定。这些都不仅仅只是React一个View层的问题。
Thumb

u268820 2016-08-26 22:52

@yes2yew1eb 、 @工具分享 、 @Jingkai Zhao 、 @大牛 、@明月清风 、 @honoka :我并不知道该怎么回复您们的评论。也许您们可以给出一些给具体的反馈,如果您们有空读完文章的话。谢谢!
Thumb

开发者头条 2016-08-27 08:40

@杨博 (Yang Bo):感谢分享~ 👍
Post wxa image%2fe721e5c74c47450c8597840d4dfc8039 用微信扫描
小程序码阅读原文

开发者头条

程序员分享平台