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

資訊專欄INFORMATION COLUMN

React學(xué)習(xí)筆記—UI交互

spacewander / 1076人閱讀

摘要：事件機制實現(xiàn)了自己的一套事件代理和處理機制，這套機制是符合標(biāo)準(zhǔn)的。事件代理并沒有將事件處理添加到相應(yīng)的每個節(jié)點上。當(dāng)啟動時，在根節(jié)點上監(jiān)聽所有的事件，并管理事件到相應(yīng)節(jié)點的映射。

props

先看個簡單的例子：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{this.props.content}

        )
    }
});

React.render(
    ,
    document.body
);

看代碼就很容易理解：通過this.props我們可以拿到組件使用時的屬性。稍微改變下代碼，我們打印出this.props瞅瞅：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}

        )
    }
});

React.render(
    ,
    document.body
);

瀏覽器頁面效果：

可以看出this.props就是組件的屬性集合，稍微改下代碼，再來看看：

var HelloWorld = React.createClass({
    render: function () {
        return (
            
{JSON.stringify(this.props)}

        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

瀏覽器頁面效果：

這個時候多了一個children的屬性，React將組件的子節(jié)點封裝到了children屬性中，如果想獲取到子節(jié)點的內(nèi)容，可以這么寫：

var HelloWorld = React.createClass({
    render: function () {
        return (
            

            {
                this.props.children.map(function (child) {
                        return child;
                })}
            

        )
    }
});

React.render(
    
        1
        2
    ,
    document.body
);

  
當(dāng)子節(jié)點只有一個的時候直接通過this.props.children獲取子節(jié)點。當(dāng)子節(jié)點的個數(shù)大于1，this.props.children是一個數(shù)組。

綜上我們可以看出，React將節(jié)點屬性和子節(jié)點都封裝到props當(dāng)中，我們可以通過this.props獲取到。在React的設(shè)定中，props是不可變的，當(dāng)props屬性確定后，我們不應(yīng)該再去手動修改它。

一個陷阱

看下這個代碼：

var Hello = React.createClass({
    render: function () {
        return (
            

        )
    }
});

React.render(
    
        
content

    ,
    document.body
);

咋一看是不是覺得頁面渲染出來應(yīng)該是這個效果：


    
content

實際上渲染出來是這樣的：

看頁面的渲染效果:我們要找到根節(jié)點，關(guān)注它的render方法的返回值。至于使用時的嵌套結(jié)構(gòu)，看完props應(yīng)該明白，這些都是組件屬性，想要使用的話，請通過this.props.children.

state

state是同UI交互最重要的屬性，看個簡單的例子，點擊按鈕，切換按鈕的顏色：

var ColorButton = React.createClass({
    getInitialState: function () {
        return {bColor: "green"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        this.setState({bColor: this.state.bColor === "green" ? "red" : "green"});
    }
});

React.render(
    ,
    document.body
);

getInitialState是用來初始化state，handleClick是用來處理我們點擊事件的。

事件機制

React實現(xiàn)了自己的一套事件代理和處理機制，這套機制是符合W3C標(biāo)準(zhǔn)的。通過這套機制，React有兩個很重要的特點：

自動綁定

所有的事件處理函數(shù)當(dāng)中的this指向組件的實例。如果想要拿到當(dāng)前操作的DOM，通過參數(shù)event獲取。

var ColorButton = React.createClass({
    getInitialState: function () {
        return {name: "button"};
    },
    render: function () {
        return (
            
        )
    },
    handleClick: function (event) {
        console.log(this.state);
        console.log(event.target);
    }
});

React.render(
    ,
    document.body
);
事件代理

React并沒有將事件處理添加到相應(yīng)的每個節(jié)點上。當(dāng)React啟動時，在根節(jié)點上監(jiān)聽所有的事件，并管理事件到相應(yīng)節(jié)點的映射。當(dāng)組件mounted或者unmounted時，事件將會被添加到映射關(guān)系或者被刪除。我感覺，有點jQuery的事件代理的意思：

#糟糕的寫法
$("li").on("click", function () {
    //todo
});

//好點的寫法
$("ul").on("click", "li", function () {
    //todo
});
狀態(tài)機

React將UI簡單的看作狀態(tài)機?？碪I看作各種各樣的狀態(tài)，并在各種狀態(tài)間切換，很容易保持UI的一致性。在React中，你只要改變組件的狀態(tài)，就會重新渲染UI，React會在最有效的方式下更新DOM。

state工作原理

通過調(diào)用setState(data, callback)方法，改變狀態(tài)，就會觸發(fā)React更新UI。大部分情況下，我們不需要提供callback函數(shù)。React會自動的幫我們更新UI。

  
后面在好好看看這個callback的功能和調(diào)用時機。
什么樣的組件該有state

大部分的組件應(yīng)該從props屬性中獲取數(shù)據(jù)并渲染。但有的時候組件得相應(yīng)用戶輸入，同服務(wù)器交互，這些情況下會用到state。React的官方說法是：盡可能的保持你的組件無狀態(tài)化。為了實現(xiàn)這個目標(biāo)，得保持你的狀態(tài)同業(yè)務(wù)邏輯分離，并減少冗余信息，盡可能保持組件的單一職責(zé)。

React官方推薦的一種模式就是：構(gòu)建幾個無狀態(tài)的組件用來渲染數(shù)據(jù)，在這些之上構(gòu)建一個有狀態(tài)的組件同用戶和服務(wù)交互，數(shù)據(jù)通過props傳遞給無狀態(tài)的組件。我的理解大概就是這樣：

var RenderComponent = React.createClass({
    render: function () {
        return (
            
    
                {
                    this.props["data-list"].map(function (item) {
                        return (
  • {item}
    • )
                    })
                }
            

        )
    }
});


var StateComponent = React.createClass({
    getInitialState: function () {
        return {list: ["xxx", "yyy"]};
    },
    render: function () {
        return (
            

                
                
            


        )
    },
    handleClick: function () {
        this.setState({list: [1, 2, 3]});
    }
});

React.render(
    ,
    document.body
);
state應(yīng)該包含什么樣的數(shù)據(jù)

UI交互會導(dǎo)致改變的數(shù)據(jù)。

state不應(yīng)包含什么樣的數(shù)據(jù)

計算過的數(shù)據(jù)

組件

從props復(fù)制的數(shù)據(jù)

state應(yīng)保含最原始的數(shù)據(jù)，比如說時間，格式化應(yīng)該交給展現(xiàn)層去做。

組件應(yīng)在render方法里控制。

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

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

相關(guān)文章

  • 好程序員React精品項目全集：商城管理后臺（視頻+源碼+筆記）

    摘要：今天給大家?guī)砹撕贸绦騿T實戰(zhàn)項目商城管理后臺。配合項目學(xué)習(xí)會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰(zhàn)項目課程介紹好程序員項目本項目是一個使用開發(fā)的商城系統(tǒng)的管理后臺，里面登錄判斷，接口調(diào)用，數(shù)據(jù)展示和編輯，文件上傳等后臺功能。 眾所周知，項目經(jīng)驗對于一個程序員變得越來越重要。在面...

    李世贊 評論0 收藏0

  • 7月份前端資源分享

    摘要：更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機化排序算法實現(xiàn)學(xué)習(xí)筆記數(shù)組隨機排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達(dá)式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...

    pingan8787 評論0 收藏0

  • React學(xué)習(xí)筆記—組件組合

    摘要：說的通俗點如果組件出現(xiàn)在了組件的方法中，那么組件就是所有者。所有者和被所有者關(guān)系是針對組件的，父子關(guān)系是針對結(jié)構(gòu)的。子調(diào)節(jié)調(diào)節(jié)發(fā)生在更新的過程中。帶有狀態(tài)的子節(jié)點對大部分組件來說，問題不大。應(yīng)該加在組件上，而不是標(biāo)簽上。 關(guān)注分離 我們在編程的時候碰到相同的功能，可以通過抽出公共方法或者類來實現(xiàn)復(fù)用。當(dāng)我們構(gòu)建新的組件的時候，盡量保持我們的組件同業(yè)務(wù)邏輯分離，將相同功能的組件抽出一個...

    xiaodao 評論0 收藏0

  • React state與props學(xué)習(xí)筆記

    摘要：組件的狀態(tài)與屬性組件本質(zhì)上是狀態(tài)機，輸入確定，輸出一定確定。這是在事件處理函數(shù)中和請求回調(diào)函數(shù)中觸發(fā)更新的主要方法。 組件的狀態(tài)與屬性 組件本質(zhì)上是狀態(tài)機，輸入確定，輸出一定確定。組件把狀態(tài)與結(jié)果一一對應(yīng)起來，組件中有state與prop（狀態(tài)與屬性）。 屬性(props)是由父組件傳遞給子組件的； 狀態(tài)(state)是子組件內(nèi)部維護的數(shù)據(jù)，當(dāng)狀態(tài)發(fā)生變化的同時，組件也會進(jìn)行更新。當(dāng)...

    lk20150415 評論0 收藏0

  • React學(xué)習(xí)筆記—Why React?

    摘要：官方說法注本人英語二十六級是和用來創(chuàng)建用戶界面的庫。很多人將認(rèn)為是中的。怎么說呢現(xiàn)在的自己就是個跟風(fēng)狗啊，什么流行先學(xué)習(xí)了再說，再看看能不能應(yīng)用在具體項目上。暫時先停下的學(xué)習(xí)，坐等。不過學(xué)習(xí)的腳步還是跟不上潮流的發(fā)展速度啊。 Why React? 官方說法 注：本人英語二十六級 React是Facebook和Instagram用來創(chuàng)建用戶界面的JavaScript庫。很多...

    余學(xué)文 評論0 收藏0

發(fā)表評論

0條評論

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