就没人出来质疑一下React吗？

---

版权声明：

尊重知识产权，严厉打击非法采集。

《就没人出来质疑一下React吗？》由 HOOYES 原创， HOOYES 保留一切权利。

原文地址：https://hooyes.net/p/all-in-javascript-react

请尊重原创，本文原文地址：https://hooyes.net/p/all-in-javascript-react

• 曾经的前端
• 现在的前端
• 质疑

曾经的前端

曾经，前端网页开发有一个原则，叫做“关注点分离”（separation of concerns）。

各种技术只负责自己的领域，不要混合在一起，形成耦合。前端网页一般只包含这三种语言。

HTML：负责网页的结构，又称语义层

CSS：负责网页的样式，又称视觉层

JavaScript：负责网页的逻辑和交互，又称逻辑层或交互层

不应该写 “行内样式”（inline style）和“行内脚本”（inline script）。

没按“关注点分离”写的代码如下：(被认为糟糕)

<h1 style="color:red;font-size:36px;"  onclick="alert('Hello')">
  Hello Hooyes!
</h1>

按 “关注点分离” 写的代码如下：(被认为好)

// xxx.js
document.getElementById("example").onclick = function(){
  alert('Hello');
}
// ...

// xxx.css
#example{color:red;font-size:36px;}

<h1 id="example">
  Hello Hooyes!
</h1>

许多前端攻城师都默默的遵守这个“关注点分离”的原则，然而…这几年React的出现改变了人们的观点。

现在的前端

React 出现以后，人们似乎把这个“关注点分离”的原则给废了。

React 强制要求把 HTML、CSS、JavaScript 写在一起。CSS in js , HTML in js … All in js

上面的例子使用 React 改写如下

const style = {
  'color': 'red',
  'fontSize': '36px'
};

const clickHandler = () => alert('Hello');

ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello Hooyes!
  </h1> ,
  document.getElementById('example')
);

上面代码在一个文件里面，封装了结构、样式和逻辑，完全违背了”关注点分离”的原则。

质疑

React 在一片叫好声音中，难道就没人出来质疑一下吗？

本文参考相关资料:

https://ruby-china.org/topics/34500

https://www.zhihu.com/question/34568369

http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

https://www.zhihu.com/question/65437198

$ welcome to hooyes.net
[INFO] ------------------------------o-
[INFO] Author : HOOYES
[INFO] Site : https://hooyes.net
[INFO] Page : https://hooyes.net/p/all-in-javascript-react
[INFO] Last build : 2023-07-31 09:16:20 +0000
[INFO] -0------------------------------

原文地址：https://hooyes.net/p/all-in-javascript-react

原文地址：https://hooyes.net/p/all-in-javascript-react