React入門0x004 jsx 和資料渲染

在react中，渲染資料的形式有多種多樣，但是萬變不離其中，都是用js。

// 渲染文字

reactdom.render(
這是乙個文字
,)

_reactdom2.default.render(_react2.default.createelement(

'div',
null,
'\u8fd9\u662f\u4e00\u4e2a\u6587\u672c'

// 渲染文字

reactdom.render(
,)

_reactdom2.default.render(_react2.default.createelement(

'div',
null,
111

,)使用babel轉義：babel --plugins transform-react-jsx index.js

_reactdom2.default.render(_react2.default.createelement(

'div',
null,
"hello world"

,)使用babel轉義：babel --plugins transform-react-jsx index.js

_reactdom2.default.render(_react2.default.createelement(

'div',
null,
1 + 1

,)使用babel轉義：babel --plugins transform-react-jsx index.js

,)使用babel轉義：babel --plugins transform-react-jsx index.js

var getname = function getname() ;

_reactdom2.default.render(_react2.default.createelement(
'div',
null,
getname()

,)使用babel轉義：babel --plugins transform-react-jsx index.js

_reactdom2.default.render(_react2.default.createelement(

'div',
null,
1 == 1 ? 1 : 0

// 方式1

reactdom.render(
})},)
// 方式2
const arr = [1, 2, 3].map((item, index) => 
})reactdom.render(
,)

// 方式1

_reactdom2.default.render(_react2.default.createelement(
'div',
null,
[1, 2, 3].map(function (item, index) ,
item
);})
// 方式2
var arr = [1, 2, 3].map(function (item, index) ,
item
);});_reactdom2.default.render(_react2.default.createelement(
'div',
null,
arr

通過轉義前轉義後對比，我們可以看出來，其實沒有html的東西存在在其中，完全都是js，所以我們可以用**的形式來構建整個ui，將模板拋棄腦後，我們可以在使用js定製元件，隨意使用js的形式組合元件，形成更大的元件，一切都是js，自由的 js。

當然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由、**的自由，否則將會帶來噩夢。

React入門0x008 生命週期

上一章說明了生命週期的概念，本質上就是框架在操作元件的過程中暴露出來的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業務，以下講的是react v16.3以下的生命週期，v16.3以及以上的版本有所不同 以下是元件掛載的過程中觸發的宣告週期 以下是元件更新的時候觸發的生命週期 constru...

SpringBoot入門0x002 URL 對映

將某個http請求對映到某個方法上 這個註解可以加在某個controller或者某個方法上，如果加在controller上，則這個controller中的所有路由對映都將會加上這個字首 下面會有栗子 如果加在方法上，則沒有字首 下面也有栗子 首先編寫controller，controller頭部的 ...

CSS入門 0x6 css編碼技巧

人眼觀察會有視差，在設計的時候應該按怎麼看起來像想要的效果，而不是怎麼算出來是想要的效果。常見的實踐是用解析度來測試，利用 查詢設計規則，但是每個 查詢都會增加成本。應該科學設定 查詢的斷點，它不是由具體裝置決定，而是由設計自身決定。可以用下面技巧來減少 查詢 總的來說，我們的思路是盡最大努力實現彈...