成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

React入門(mén)0x003：jsx 和自由的組件

eechen / 1402人閱讀

摘要：概述說(shuō)起來(lái)，我喜歡的還是他的思想，在中，實(shí)際上沒(méi)有的區(qū)別，全部都是，就和一樣，可以將所有的資源等同視之。但是這時(shí)候又出來(lái)說(shuō)，我要把寫(xiě)在中，真是煩透咯不過(guò)，這種東西不過(guò)是年一輪回，就和時(shí)尚一樣。

0x000 概述

說(shuō)起來(lái)react，我喜歡的還是他的思想，在react中，實(shí)際上沒(méi)有html、css、js的區(qū)別，全部都是js，就和webpack一樣，可以將所有的資源等同視之。但是這在一開(kāi)始，就讓很多人感覺(jué)很難受，畢竟在這之前，我們看過(guò)的大部分關(guān)于web的書(shū)、文章，提出的最佳實(shí)踐就是html、js、css分開(kāi)來(lái)，因?yàn)榍岸耸軌蛄嗽?b>js中拼接模板，php、java之類(lèi)的后端也受夠了代碼中拼接html，所以就有了模板引擎之類(lèi)的存在。但是react這時(shí)候又出來(lái)說(shuō)，我要把html寫(xiě)在js中，真是煩透咯！

不過(guò)，這種東西不過(guò)是50年一輪回，就和時(shí)尚一樣。當(dāng)時(shí)不容許這么做是受限于技術(shù)、時(shí)代之類(lèi)的，而如今可以這么做是因?yàn)闀r(shí)機(jī)到了！

0x001 項(xiàng)目初始化 
$ cp 0x001-helloworld 0x003-jsx-and-component

當(dāng)前項(xiàng)目情況

+ 0x001-helloworld
+ 0x002-jsx
+ 0x003-jsx-and-component
    + src
        - index.html
        - index.js
    - .babelrc
    - package.json
    - webpack.config.js
0x002 自由的組件

使用變量

import React from "react"
import ReactDom from "react-dom"

const p = 
這是`p`


ReactDom.render(
    p,
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

說(shuō)明：在這個(gè)案例中，使用了ReactDom.render方法，我們查看一下關(guān)于這個(gè)方法的文檔：

ReactDOM.render(element, container[, callback])

參數(shù)：

 `element`: `React element`，可以使用`React.createElement`創(chuàng)建
 `container`: 容器
 `callback`: 回調(diào)，可選

由參數(shù)1可知，我們只要提供一個(gè)React element便可，而由上一章可以知道， React.createElement可以返回一個(gè)React element，所以我們可以這么調(diào)用：

ReactDom.render(
    React.createElement(
        "h1",
        null,
        "Hello, world!"
    ),
    document.getElementById("app")
);

而jsx經(jīng)過(guò)babel翻譯之后，又可以轉(zhuǎn)化成React.createElement，所以，我們可以想這樣調(diào)用：

ReactDom.render(
    
Hello, world!
,
    document.getElementById("app")
);

自然，將它保存成一個(gè)變量，也是可以的了，

使用方法

const div = () => 
這是`div`


ReactDom.render(
    div(),
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

當(dāng)然在js中的所有操作可以做到呢：

import React from "react"
import ReactDom from "react-dom"

const aP = 
這是`p`


const aDiv = () => 
這是`div`


const divWithChildren = (...children) => {
    const len = children.length
    return 

        一共有{len}個(gè)子組件
        {
            children.map((child, index) => {
                return 

                    這是第{index + 1}個(gè)子組件:
                    {child}
                

            })
        }
    

}

ReactDom.render(
    divWithChildren(
        aP,
        aDiv(),
        
h1

    ),
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

使用組件

class AComponent extends React.Component {
    render() {
        return 

            classComponent
        

    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看瀏覽器：http://localhost:8080/

說(shuō)明：這種方式和上面兩種有些不一樣，之后會(huì)詳細(xì)說(shuō)來(lái)。

0x003 總結(jié)

案例一非常簡(jiǎn)單

案例二顯得略復(fù)雜且雜亂，但是卻能夠很好的說(shuō)明一點(diǎn)，那就是在react中，可以盡情的使用js的思想去構(gòu)建一個(gè)簡(jiǎn)單組件，而簡(jiǎn)單組件又可以組合成復(fù)雜組件。相比于angular、vue等模板化的框架，react在構(gòu)建UI方面讓我們有更多的選擇，同時(shí)也可以產(chǎn)生出許多非常具有突破性的思想！

案例三使用類(lèi)來(lái)表示一個(gè)組件，非常符合面相對(duì)象的思想

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

0x004 資源

react

transform-react-jsx

源碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96942.html

相關(guān)文章

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

    摘要：概述在中，渲染數(shù)據(jù)的形式有多種多樣，但是萬(wàn)變不離其中，都是用。當(dāng)然，自由也帶來(lái)混亂，需要將這種自由化為思想的自由，而不是工程的自由代碼的自由，否則將會(huì)帶來(lái)噩夢(mèng)。 0x000 概述 在React中，渲染數(shù)據(jù)的形式有多種多樣，但是萬(wàn)變不離其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 這是一個(gè)文本, document.getEle...

    xingpingz 評(píng)論0 收藏0

  • React入門(mén)0x005: React Component和props

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

    genefy 評(píng)論0 收藏0

  • React入門(mén)0x002: jsx

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

    hedzr 評(píng)論0 收藏0

  • 01.react入門(mén)必備，知識(shí)點(diǎn)梳理，生命周期全講解

    摘要：生命周期在版本中引入了機(jī)制。以后生命周期圖解不包含官方不建議使用的事件處理事件的命名采用小駝峰式，而不是純小寫(xiě)。只是在兄弟節(jié)點(diǎn)之間必須唯一受控組件使的成為唯一數(shù)據(jù)源。 react 基礎(chǔ) JSX JSX是一個(gè) JavaScript 的語(yǔ)法擴(kuò)展,可以很好地描述 UI 應(yīng)該呈現(xiàn)出它應(yīng)有交互的本質(zhì)形式。 React DOM 在渲染所有輸入內(nèi)容之前，默認(rèn)會(huì)進(jìn)行轉(zhuǎn)義。它可以確保在你的應(yīng)用中，永遠(yuǎn)...

    Jiavan 評(píng)論0 收藏0

  • React入門(mén)0x006: State

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

    TNFE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<