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

資訊專(zhuān)欄INFORMATION COLUMN

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

genefy / 859人閱讀

摘要：概述這一章講組件，組件才是的核心，也是構(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 
hello

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

查看瀏覽器

我們可以給他參數(shù)

const App = (name) => {
    return 
hello {name}

}
ReactDom.render(
    App("world"),
    document.getElementById("app")
)

查看瀏覽器

由此，我們可以自定義一些特別的組件了，比如：

const Article = (title, content) => {
    return 

        
{title}

        
{content}

    

}
ReactDom.render(
    Article("送方外上人","孤云將野鶴，豈向人間住。莫買(mǎi)沃洲山，時(shí)人已知處。"),
    document.getElementById("app")
)

查看瀏覽器

0x002 組件的函數(shù)寫(xiě)法和參數(shù)傳遞

組件也可以使用jsx 來(lái)寫(xiě)

const App = () => {
    return 
hello

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

用babel轉(zhuǎn)碼試試：babel --plugins transform-react-jsx index.js:

var App = function App() {
    return _react2.default.createElement(
        "p",
        null,
        "hello"
    );
};
_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById("app"));

可以看到依舊被轉(zhuǎn)成了createElement函數(shù)，由React.createElement的文檔說(shuō)明可知，該函數(shù)的第一個(gè)參數(shù)可以是類(lèi)似div、p之類(lèi)的html元素，也可以是React Component，而React Component可以是一個(gè)類(lèi)或者一個(gè)函數(shù)。該栗子中就是函數(shù)

那如果我們要實(shí)現(xiàn)傳參呢，我們可以想想html如何傳參，比如img：

那么寫(xiě)法和html及其類(lèi)似的 jsx 呢？可想而知：

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

我們使用babel轉(zhuǎn)碼看看：babel --plugins transform-react-jsx index.js:

_reactDom2.default.render(_react2.default.createElement(App, { name: "world" }), document.getElementById("app"));

可以看到，被轉(zhuǎn)化成了鍵值對(duì)作為React.createElement的第二個(gè)參數(shù)，那我們應(yīng)該如何訪問(wèn)這個(gè)參數(shù)呢？

const App = (props) => {
    console.log(props)
    return 
hello {props.name}

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

查看瀏覽器：

0x003 組件的類(lèi)寫(xiě)法和傳參

在之前的文章，也已經(jīng)寫(xiě)過(guò)這么一個(gè)類(lèi)似的栗子：

class App extends React.Component{
    render(){
        return 
hello

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

查看瀏覽器：

那如何傳參呢？

class App extends React.Component {
    render() {
        console.log(this)
        return 
hello

    }
}

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

查看瀏覽器：

我們可以看到，參數(shù)被放在了props中，所以，我們可以像這樣訪問(wèn)：

class App extends React.Component {
    render() {
        console.log(this)
        return 
hello {this.props.name}

    }
}

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

查看瀏覽器

0x004 jsx也是js

因?yàn)?b>jsx也是js，所以，上面的栗子我們也可以如此改造

class App extends React.Component {
    render() {
        console.log(this)
        return 
hello {this.props.name}

    }
}

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

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

_reactDom2.default.render(_react2.default.createElement(App, { name: Date() }), document.getElementById("app"));

查看瀏覽器：

0x005 總結(jié)

在項(xiàng)目中，我們一般使用類(lèi)的形式組織整個(gè)項(xiàng)目，但是在某些情況下，使用函數(shù)也是一種不錯(cuò)的選擇。

jsx是使用類(lèi)html的語(yǔ)法來(lái)寫(xiě)js，所以很多html的思想可以套用到jsx，但是一定要記得，這是js，而不是html

0x006 資源

react

transform-react-jsx

源碼

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

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

相關(guān)文章

  • Router入門(mén)0x204: react-route簡(jiǎn)單栗子

    摘要：概述這一章仔細(xì)講一講的使用栗子簡(jiǎn)單使用源碼簡(jiǎn)單使用首頁(yè)文章我的首頁(yè)文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁(yè)文章我的首頁(yè)文章我的效果說(shuō)明增強(qiáng)版，如果當(dāng)前路由命中，將會(huì)啟用或者。 0x000 概述 這一章仔細(xì)講一講 react-route 的使用栗子 0x001 簡(jiǎn)單使用 源碼 import React from react import ReactDom from react-d...

    番茄西紅柿 評(píng)論0 收藏0

  • Router入門(mén)0x205: react-route + redux + react 集成

    摘要：概述這一章終于大集成了集成源碼效果說(shuō)明集成主要是用到庫(kù)集成源碼效果說(shuō)明主要用到庫(kù)，是針對(duì)庫(kù)在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對(duì)應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說(shuō)明主要用到庫(kù)都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...

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

  • React入門(mén)0x007: 生命周期概念

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

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

  • React入門(mén)0x008: 生命周期

    0x000 概述 上一章說(shuō)明了生命周期的概念，本質(zhì)上就是框架在操作組件的過(guò)程中暴露出來(lái)的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業(yè)務(wù)，以下講的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同 0x001 組件掛載 以下是組件掛載的過(guò)程中觸發(fā)的聲明周期： class App extends React.Component { constructor(pr...

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

  • React入門(mén)0x009: 事件處理

    摘要：概述上一章講咯生命周期，這一章就是事件處理咯事件綁定綁定一個(gè)外部函數(shù)按鈕綁定一個(gè)內(nèi)部函數(shù)按鈕解決函數(shù)綁定的問(wèn)題上面的栗子有個(gè)問(wèn)題在內(nèi)無(wú)法訪問(wèn)內(nèi)的資源，比如按鈕可以這么解決這個(gè)問(wèn)題按鈕或者按鈕或者按鈕第三中方式需要支持 0x000 概述 上一章講咯生命周期，這一章就是事件處理咯 0x001 事件綁定 // 綁定一個(gè)外部函數(shù) function handleClick(event) { ...

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

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

0條評(píng)論

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