hooyes 灵感纵容非凡

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

2017-05-08
hooyes

曾经的前端

曾经,前端网页开发有一个原则,叫做“关注点分离”(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


Similar Posts

Comments

TOP