国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React入門0x004：jsx 和數(shù)據(jù)渲染

xingpingz / 2892人閱讀

摘要：概述在中，渲染數(shù)據(jù)的形式有多種多樣，但是萬變不離其中，都是用。當(dāng)然，自由也帶來混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會帶來噩夢。

0x000 概述

在React中，渲染數(shù)據(jù)的形式有多種多樣，但是萬變不離其中，都是用js。

0x001 渲染文本 
// 渲染文本
ReactDom.render(
    
這是一個文本
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：babel --plugins transform-react-jsx index.js

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

查看瀏覽器

0x002 渲染數(shù)字字面量 
// 渲染文本
ReactDom.render(
    
{111}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：babel --plugins transform-react-jsx index.js

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

查看瀏覽器

0x003 渲染字符串字面量 
ReactDom.render(
    
{"hello world"}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：babel --plugins transform-react-jsx index.js

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

查看瀏覽器

0x004 渲染表達(dá)式 
ReactDom.render(
    
{1 + 1}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：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(
    
{name}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：babel --plugins transform-react-jsx index.js

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

0x006 渲染函數(shù) 
const getName = () => "world"
ReactDom.render(
    
{getName()}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：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(
    
{
        1 == 1 ? 1 : 0
    }
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：babel --plugins transform-react-jsx index.js

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

查看瀏覽器

0x008 渲染數(shù)組 
// 方式1
ReactDom.render(
    
{
        [1, 2, 3].map((item, index) => {
            return 
{item}

        })
    }
,
    document.getElementById("app")
)
// 方式2
const arr = [1, 2, 3].map((item, index) => {
    return 
{item}

})
ReactDom.render(
    
{arr}
,
    document.getElementById("app")
)

使用babel轉(zhuǎn)義：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 總結(jié)

通過轉(zhuǎn)義前轉(zhuǎn)義后對比，我們可以看出來，其實沒有html的東西存在在其中，完全都是js，所以我們可以用代碼的形式來構(gòu)建整個UI，將模板拋棄腦后，我們可以在使用js定制組件，隨意使用js的形式組合組件，形成更大的組件，一切都是js，自由的 js。

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

0x010 資源

react

transform-react-jsx

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96980.html

相關(guān)文章

  • React入門0x006: State

    摘要：概述這一章講，是的核心，也算是的核心思想都很核心啊。但是接著我們又搞了一個定時器，每秒執(zhí)行一直函數(shù)，將修改為最新的時間。就完成了視圖的更新。參數(shù)一是要更新的數(shù)據(jù)，我們只需要傳輸我們要更新的數(shù)據(jù)即可，對于不需要更新的數(shù)據(jù)，則不需要理睬。 0x000 概述 這一章講state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 問題 在上一章節(jié)的栗子...

    TNFE 評論0 收藏0

  • React入門0x002: jsx

    摘要：概述也是，如是說。屬性集合，比如等屬性對應(yīng)，是關(guān)鍵詞，所以用代替，也可以是自定義的屬性。形式送方外上人送上人孤云將野鶴，豈向人間住。莫買沃洲山，時人已知處。 0x000 概述 jsx也是js， 如是說。 0x001 語法 在上文React入門0x001-環(huán)境配置和 helloworld中， 出現(xiàn)了一句奇怪的代碼： Hello, world! 這在html中沒有任何問題，但問題是他出現(xiàn)在...

    hedzr 評論0 收藏0

  • React入門0x003：jsx 和自由的組件

    摘要：概述說起來，我喜歡的還是他的思想，在中，實際上沒有的區(qū)別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時候又出來說，我要把寫在中，真是煩透咯不過，這種東西不過是年一輪回，就和時尚一樣。 0x000 概述 說起來react，我喜歡的還是他的思想，在react中，實際上沒有html、css、js的區(qū)別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開始，...

    eechen 評論0 收藏0

  • React入門0x005: React Component和props

    摘要：概述這一章講組件，組件才是的核心，也是構(gòu)建的項目中最小的單元。莫買沃洲山，時人已知處。是使用類的語法來寫，所以很多的思想可以套用到，但是一定要記得，這是，而不是資源源碼 0x000 概述 這一章講組件，組件才是React的核心，也是React構(gòu)建的項目中最小的單元。 0x001 組件 上面的章節(jié)有一個類似下面的栗子： const App = () => { return hel...

    genefy 評論0 收藏0

  • React入門0x007: 生命周期概念

    摘要：概述上一章只是稍微了解了一下和相關(guān)的簡單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。 0x000 概述 上一章只是稍微了解了一下state和setState相關(guān)的簡單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念 這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。大凡事物從...

    Blackjun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<