React入門0x004：jsx 和數據渲染

0x000 概述

在React中，渲染數據的形式有多種多樣，可是萬變不離其中，都是用js。

0x001 渲染文本

// 渲染文本
ReactDom.render(
    <div>這是一個文本</div>,
    document.getElementById('app')
)

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

_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    '\u8FD9\u662F\u4E00\u4E2A\u6587\u672C'
), document.getElementById('app'));

查看瀏覽器

0x002 渲染數字字面量

// 渲染文本
ReactDom.render(
    <div>{111}</div>,
    document.getElementById('app')
)

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

_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    111
), document.getElementById('app'));

查看瀏覽器

0x003 渲染字符串字面量

ReactDom.render(
    <div>{"hello world"}</div>,
    document.getElementById('app')
)

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

_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    "hello world"
), document.getElementById('app'));

查看瀏覽器

0x004 渲染表達式

ReactDom.render(
    <div>{1 + 1}</div>,
    document.getElementById('app')
)

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

_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    1 + 1
), document.getElementById('app'));

查看瀏覽器

0x005 渲染變量

const name = 'world'
ReactDom.render(
    <div>{name}</div>,
    document.getElementById('app')
)

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

var name = 'world';
_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    name
), document.getElementById('app'));

0x006 渲染函數

const getName = () => 'world'
ReactDom.render(
    <div>{getName()}</div>,
    document.getElementById('app')
)

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

var getName = function getName() {
    return 'world';
};
_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    getName()
), document.getElementById('app'));

查看瀏覽器

0x007 三元運算符

ReactDom.render(
    <div>{
        1 == 1 ? 1 : 0
    }</div>,
    document.getElementById('app')
)

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

_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    1 == 1 ? 1 : 0
), document.getElementById('app'));

查看瀏覽器

0x008 渲染數組

// 方式1
ReactDom.render(
    <div>{
        [1, 2, 3].map((item, index) => {
            return <p key={index}>{item}</p>
        })
    }</div>,
    document.getElementById('app')
)
// 方式2
const arr = [1, 2, 3].map((item, index) => {
    return <p key={index}>{item}</p>
})
ReactDom.render(
    <div>{arr}</div>,
    document.getElementById('app')
)

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

// 方式1
_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    [1, 2, 3].map(function (item, index) {
        return _react2.default.createElement(
            'p',
            { key: index },
            item
        );
    })
), document.getElementById('app'));
// 方式2
var arr = [1, 2, 3].map(function (item, index) {
    return _react2.default.createElement(
        'p',
        { key: index },
        item
    );
});
_reactDom2.default.render(_react2.default.createElement(
    'div',
    null,
    arr
), document.getElementById('app'));

查看瀏覽器

0x009 總結

經過轉義前轉義後對比，咱們能夠看出來，其實沒有html的東西存在在其中，徹底都是js，因此咱們能夠用代碼的形式來構建整個UI，將模板拋棄腦後，咱們能夠在使用js定製組件，隨意使用js的形式組合組件，造成更大的組件，一切都是js，自由的 js。

固然，自由也帶來混亂，須要將這種自由化爲思想的自由，而不是工程的自由、代碼的自由，不然將會帶來噩夢。

0x010 資源

• react
• transform-react-jsx
• 源碼