虚心请教： ReactJS vs. HTML/CSS/JS

notlrac

ReactJS是目前最有名的Framework（之一？）。
除了JSX和virtualDOM以外，(比较HTML/CSS/JS/JQUERY/BOOTSTRAP而言），
我还不能理解ReactJS到底好在哪里？解决了什么问题？

用大约三行HTML代码就能解决的问题，用ReactJS大概要三十行代码，还丢掉了HTML的灵活性。
即使是这样绕了个大弯，大家还一直认为ReactJS好，趋之若鹜。？？

请教内行的人帮助解答。（不要什么结构好、代码重用之类的虚幻的东西。）

notlrac

贫道以德服人 发表于 2021-8-8 22:23
框架的好处就是做复杂的大项目容易而且易于管理，小的项目就是杀鸡用牛刀，费力不讨好。
框架有个问题就是3 ...

有道理，谢谢解答。

辰哥

我也有这个疑问
政府后端PHP/.Net，没nodejs。随便你jquery CSS怎么写，就是不给你用nodejs
是security那边偷懒还是安全方面考虑的问题太多？
（本地服务器）

hellfire6969

关注 最近在看react 但是好像vue最近比较流行 土澳还是技术比较落后

Zmlmf

最近也在看React，我也不知道好在哪里还是简简单单的JS Jquery就能解决问题。。。可能是看起来比较专业比较复杂一点吧。。。

eguan88

不知道，做成single page app, 更适合手机吧

yrqin

我不是内行人，但是也对一些前后端的框架有所了解也比较感兴趣。所以我去google了一下，希望有所启发：


What And Why React.js

https://www.c-sharpcorner.com/article/what-and-why-reactjs/

以下是节选：

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.

It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. ...

如果对这些说法还没有什么感觉，可以继续学习，做几个简单的项目实际体验看看。

sydney_1000

想让内行解答首先得入门才行啊。我干了这麽多年的全栈硬是不知道怎末回答你。你随便去找个reactjs 的网课，都有事例代码。你把那个代码用jQuery重写一遍就知道答案了。

matutu22

这个真的很难回答 就算回答的言简意赅也没法说全react所有的特性 更别说结合redux ssr以后的东西
直白的说你得自己用这些框架写代码以及解决实际问题
每个特性发明都是有现实工作中的需求的
你提的什么重构 那不是虚幻的东西 那是工作中用这些框架带来最基本的特性 如果没接触过永远觉得这些概念是虚幻的
建议你自己上网找个基本react教程学一学再看看自己的想法变了没有
以及你需要补一些写代码的基础

Mushroomm

SPA

jeremyOTZ

抛砖。我是菜狗，有不对的地方希望大佬指正。

OP懂jQuery，jQuery也是一个library，本质上和React这类的工具一样，是为了把复杂的问题简单化。反过来，如果问题不复杂，就没有必要引入增加复杂度，因为引入新的工具意味着增加使用和学习成本。

举个例子：http://youmightnotneedjquery.com/#deep_extend。引入jQuery是为了类似这种情况，当你想用extend的时候就不用冒着自己写错和别人看不懂的风险去写一个自己的extend function。反之，只是为了选element这个目的的话，有querySelector之后就没有特别的理由要用$('.selector')了

React、Angular、Vue等等的目的是简化更高阶的交互逻辑，而复杂的交互逻辑只会出现在中大型项目里。所以绝大多数小型项目是不用frameworks做的。类似OP说的3行HTML能解决的问题，用这些frameworks做就是费力不讨好。在校、在小公司、或者自学的话只能接触到小型项目，很难有切身体会。只能跟一些实际项目，遇到jQuery写得头大的时候，才能体会到用react或者vue的好。

我试图描述一下这个渐进的过程，可能不是很准确：

假如我们想做一个类似Google Maps左上角那种菜单，点hamburger button可以弹出菜单，主界面加一个dark overlay。想象一下怎么写比较方便：是给每个element单独加一个modifier class，还是加一个flag class在body tag上控制所有的elements？肯定是后者对吧。我们无需了解需要操作哪几个elements，只要去更新body的class就可以决定好几个elements的状态。假设这class叫“menu-is-open”好了，日后我们想拓展，也可以根据这个menu-is-open去操作，不用再去JS里面去找特定element拖慢运行速度。比如未来我们想做一个主界面向右移动的transition，好像menu把主界面推走一点的动画效果，可以很容易地`.menu-is-open .main { ... }`这样加。这个时候不需要引入framework。

提升难度，如果我们底下elements的内容需要更新呢？比如菜单打开了以后我们要暂停播放slider、暂停播放video、显示一个close button。类似CSS的处理办法，如果在外层有一个"menu-is-open"存着当前菜单状态，底下slider、video和button都可以自行通过这个状态得知菜单是否开启，进而更新自己内部的内容，是不是很方便？我们只要让hamburger button去更新这个menu-is-open的状态，其他的components进而就会得知菜单是否开启，然后自行更新内容。如果close button需要关闭菜单，也只需要去找到外层的component去更新“menu-is-open”，而不用管别的东西。

这个时候有一个framework帮助components之间通过state沟通就开始变得有意义了。小型项目如WordPress的话，自己花点时间写一个JS Class管理比转React更省时。但是是当中大型项目有成百上千个components、modules的话，一个成熟稳定的framework就变得很必要。这个时候我们没有必要reinventing the wheel，用久经考验的framework更省时也稳定。

再提升难度，menu-open只是网站上的一个状态，如果我们类似的状态还有好多种怎么办？比如e-commerce网站常有的用户是否登陆、是否是金卡银卡客户、购物车里有没有东西、coupon code有没有用、当前时段和customer group有没有promotion、用户是不是停在当前页面过久……状态太多了，还有千百种组合情况。这时候全放在外层component里的话，管理也是个问题。这时如果有一个工具可以高效管理所有的状态，然后底下的components可以去这个工具访问自己需要的一个甚至数个状态，进而更新自己的内容就好极了。

当意识到自行管理states的成本过高的时候，Redux这类state container就开始发挥作用了。

综上，当你不知道一个工具有没有用的时候，说明你目前处理的事情用不到。当你手头的工具不够用了，那就需要学习用更适合的工具去做事。

另外，结构好、代码重用也不是虚幻的东西，当你接触的项目规模到了一定程度，自然就需要用好的结构和代码重用这样的概念去管理你的代码，让它可读、可扩展、可维护。

nocowlevel

楼主说的用三行HTML代码能解决的“问题”，其实完全没有达到真正的问题的程度。在页面上生成个对话框，显示个图片，根本没有解决什么实际的问题。就像只放了块砖在地上，离修好房子还差了十万八千里。

就像砖头和钢筋水泥得经过设计施工到一起才能建起来房子，代码必须要合理地组合到一起才，并且真正地实现了业务逻辑才是真的解决了问题。ReactJS就是能很好的把HTML，CSS，JS等基础“建材”组合到一起“建房”的科技。并且ReactJS非常适合“多人团队协作建房”。

另外，所谓的“灵活性”对于稍微大一点的项目（业务逻辑复杂，多人协作）来说反而是最大的问题。灵活性意味实践的不确定性，灵活的东西每个人的用法就都不一样，这对于项目的集成，测试和维护都是非常大的难题。在面对这些问题的时候，你和你的团队就大概会想要：一些规范来约束和指导开发，易于实现规范的工具用于快速合规地构建项目，一套测试工具用于随时检测代码的质量，等等。对于这些要求ReactJS作为框架级别的工具，都有很好的支持。

notlrac

谢谢各位专业人士的解答，我个人的学识和见识有限，读了各位的解答后，受益良多，谢谢！
抱歉没法给各位加分。

williamstep

用三行HTML代码能解决的“问题”
因为你的问题太简单了
如果是一个稍微复杂点的要求，恨不得把html的发明人拖出来鞭尸
HTML， js, CSS三套马车的落后模式，已经不适合现代的要求
三合一才是王道

Alex2020

HTML本身就是个静态，静态能干的太有限了。三行HTML代码能干什么？ 估计你现在连初学者都不算。学完JS，你就知道为什么react有用了。

InTheEnd

williamstep 发表于 2021-8-9 15:22
用三行HTML代码能解决的“问题”
因为你的问题太简单了
如果是一个稍微复杂点的要求，恨不得把html的发明人 ...

不关HTML什么事情，能用HTML解决当然是HTML，component本身还不是在用HTML，react对比的是jQuery

notlrac

谢谢各位发表自己的看法。

我这里解释一下：
说我的问题只有三行HTML代码，显然是曲解我的意思。我上文中只是举例，为方便说理而已。