浅谈cssinjs

发表于   |  

浅谈 css in js

黑历史

在过去很长一段时间里大家都对网页开发的认识是这样的:

HTML : 负责网站的结构骨架
CSS : 负责美化网页
JavaScript : 负责数据和业务逻辑以及交互处理

谁要是把代码写成下面这样肯定会被认为是 freshman

1
2
3
4
5
6
<button 
  style="width: 60px; height: 48px"  
  onclick="console.log('hello world')"
>
  确认
<button>

因为这样违背了 “行内样式” 和 “行内脚本” 的基本原则。

逆转

上面的这种思想统治了前端届很长一段时间(19xx ~ 2014), 直到 React 出现以后打破了这条“准则”, 因为 React 是组件结构,强制要求把 HTML、CSS、JavaScript 写在一起，对上面的例子改写成 React 如下形式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import ReactDom from 'react-dom';
export default class Button extends React {
  render() {
    return (
      <button 
        style={{ width: 60px, height: 48px }}
        onClick={()=> console.log('hello world')}
      >
      <button>
    )
  }
}
ReactDom.render(<Button />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
diff --git a/learning/src/actions/taskActions.js b/learning/src/actions/taskActions.js
index e0531d3..301cba0 100644
--- a/learning/src/actions/taskActions.js
+++ b/learning/src/actions/taskActions.js
@@ -108,7 +108,8 @@ export function saveTrainingJob(data, callback) {
     body: JSON.stringify(data)
   };
   const successCallback = function () {
-    callback && callback();
+    // callback && callback();