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

資訊專欄INFORMATION COLUMN

React學(xué)習(xí)筆記—數(shù)據(jù)展示

Magicer / 1999人閱讀

摘要：我們使用最基本的事就是用來展現(xiàn)數(shù)據(jù)。使得展現(xiàn)數(shù)據(jù)變得簡單，并且當(dāng)數(shù)據(jù)改變時(shí)，能自動(dòng)保持的更新。使用了內(nèi)部的虛擬，當(dāng)數(shù)據(jù)發(fā)生改變，先在虛擬中計(jì)算變化，最后將變動(dòng)的部分反應(yīng)到真實(shí)的中?？梢园阉醋饔兄蜖顟B(tài)并且可以返回結(jié)構(gòu)的函數(shù)。

我們使用UI最基本的事就是用來展現(xiàn)數(shù)據(jù)。React使得展現(xiàn)數(shù)據(jù)變得簡單，并且當(dāng)數(shù)據(jù)改變時(shí)，React能自動(dòng)保持UI的更新。

開始

創(chuàng)建一個(gè)簡單的Demo：

#index.html



    
    React












  
以后所有代碼示例的HTML都是用上面的代碼，只關(guān)注JavaScript的編寫。


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

            Hello,!
            It is {this.props.date.toTimeString()}
            

        );
    }
});

setInterval(function () {
    React.render(
        ,
        document.getElementById("example")
    );
}, 500);
React.createClass

用來創(chuàng)建一個(gè)組件類，前面也說了，編寫React代碼主要就是構(gòu)建通用的組件。

React.render

將React的模板轉(zhuǎn)化為HTML，并插入到相應(yīng)的DOM結(jié)構(gòu)中。

功能

我們大概了解到這段代碼的功能，即使之前完全沒有接觸過React。其實(shí)就是每隔500毫秒將下面這個(gè)結(jié)構(gòu)：


Hello,!
It is {this.props.date.toTimeString()}

插入到下面的結(jié)構(gòu)中：

打開瀏覽器看看效果：發(fā)現(xiàn)時(shí)間一直在變化，而input框，無論我們怎么操作，一直保持原樣不變。
這就奇怪了，按照我們固有的想法，應(yīng)該是每隔500毫秒，重新替換div當(dāng)中的內(nèi)容啊，為啥時(shí)間一直在變，而輸入框一直不變呢？
這就是React的神奇之處了。

響應(yīng)式更新

上面的例子中，我們只是創(chuàng)建了個(gè)組件，并將它插入DOM中，并沒有寫別的代碼。而奇特的效果都是React幫我們實(shí)現(xiàn)的。
除非有必要，否則React是不會(huì)直接去操作DOM的。React使用了內(nèi)部的虛擬DOM，當(dāng)數(shù)據(jù)發(fā)生改變，先在虛擬DOM中計(jì)算變化，最后將變動(dòng)的部分反應(yīng)到真實(shí)的DOM中。我們知道，頻繁操作DOM代價(jià)是昂貴的，它會(huì)導(dǎo)致頁面反復(fù)repaint。React聲稱自己很快，正是基于此。
回過頭來看看上面的例子，為啥子input不變，而時(shí)間一直在變化？input相對于這個(gè)組件來說，是它的屬性，并且沒有嵌入動(dòng)態(tài)的數(shù)據(jù)。而在React的設(shè)定中，屬性是不可變的。稍稍改變下JavaScript代碼，再來看下效果：

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

            Hello,!
            It is {this.props.date.toTimeString()}
            

        );
    }
});

setInterval(function () {
    React.render(
        ,
        document.getElementById("example")
    );
}, 500);
組件類似于函數(shù)

React的組件很簡明?？梢园阉醋饔兄?em>props和state狀態(tài)并且可以返回HTML結(jié)構(gòu)的函數(shù)。因?yàn)榻M件很簡明，所以很容易就可以看出它在干什么。

  
React組件的render方法中，返回的結(jié)構(gòu)只能有一個(gè)根節(jié)點(diǎn)。


#正確的
var HelloWorld = React.createClass({
    render: function () {
        return (
          

              

          

        );
    }
});

#錯(cuò)誤的
var HelloWorld = React.createClass({
    render: function () {
        return (
          

          

        );
    }
});
JSX語法概述

細(xì)心的人會(huì)發(fā)現(xiàn)，我們編寫的JavaScript代碼中，所有的模板內(nèi)容都沒有加引號。這種JavaScript和HTML混寫的方式就是所謂的JSX語法了，React獨(dú)創(chuàng)。
這種語法瀏覽器是不識(shí)別的，引入我們編寫的JavaScript文件的時(shí)候需要指定type類型為text/jsx，同時(shí)還要需要引入JSXTransformer.js將JSX語法轉(zhuǎn)化為真正的JavaScript代碼。當(dāng)然了，這個(gè)轉(zhuǎn)化過程是需要花費(fèi)時(shí)間的。

React的作者認(rèn)為，組件應(yīng)該同關(guān)注分離，而不是同模板和展現(xiàn)邏輯分離。結(jié)構(gòu)化標(biāo)記和生成結(jié)構(gòu)化標(biāo)記的代碼是緊密關(guān)聯(lián)的，此外，展現(xiàn)邏輯一般都很復(fù)雜，使用模板語言會(huì)使展現(xiàn)變得笨重。
React解決這個(gè)問題的方式就是：直接通過JavaScript代碼生成HTML和組件樹，這樣的話，你就可以使用JavaScript富豐的表達(dá)力去構(gòu)建UI。為了使這個(gè)過程變得更簡單，React創(chuàng)建了類似HTML的語法去構(gòu)建節(jié)點(diǎn)樹，也就是JSX了。
JSX語法是可選的，也就是說你也可以不使用，直接寫JavaScript代碼?？磦€(gè)對比例子：

#JSX語法
React.render(
    
content
,
    document.getElementById("example")
);

#plain JavaScript
React.render(
    React.createElement("div", {className: "c-list"}, "content"),
    document.getElementById("example")
);

這樣簡單的例子，我們都能感覺到JSX更加的語義化，更別說復(fù)雜的組件了。所以強(qiáng)烈建議使用JSX。
前面說到JS的引入

生成環(huán)境則不能這么干，因?yàn)镴SX的轉(zhuǎn)化是需要時(shí)間的。線上的代碼應(yīng)該是直接可執(zhí)行的，我們應(yīng)該在離線環(huán)境下提前轉(zhuǎn)化，這里就要使用到工具了。

react-tools

grunt-react

gulp-react

參考資料：
Displaying Data

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

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

相關(guān)文章

  • 好程序員React精品項(xiàng)目全集：商城管理后臺(tái)（視頻+源碼+筆記）

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

    李世贊 評論0 收藏0

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

    摘要：使用，不一定非要使用語法，可以使用原生的進(jìn)行開發(fā)。注意標(biāo)簽的屬性和，需要寫成和。因?yàn)閮蓚€(gè)屬性是的保留字和關(guān)鍵字。在的設(shè)定中，初始化完后，是不可變的。改變會(huì)引起無法想象的后果。重要的是這個(gè)過程是由操控的，不是手動(dòng)添賦值的屬性。 深入JSX JSX可以看作JavaScript的拓展，看起來有點(diǎn)像XML。使用React，可以進(jìn)行JSX語法到JavaScript的轉(zhuǎn)換。 Why JSX? ...

    marser 評論0 收藏0

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

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

    xiaodao 評論0 收藏0

  • [BizCharts學(xué)習(xí)筆記] --- 數(shù)據(jù)可視化

    摘要：所以筆者選擇了，為什么會(huì)選擇一是因?yàn)樗前⒗锍銎?，?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制，不會(huì)像那樣高度封裝，所以在開發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫中的一員。 實(shí)際上，在數(shù)據(jù)可視化這一塊筆者并沒有很多的開發(fā)經(jīng)歷和經(jīng)驗(yàn)，不過正是因?yàn)檫@個(gè)問題筆者才決定學(xué)習(xí)一門數(shù)據(jù)可視化框架來彌補(bǔ)自己在這一方面的不足。在這個(gè)大數(shù)據(jù)統(tǒng)治的時(shí)代，數(shù)據(jù)能給我們提供前所未有的便捷...

    CoffeX 評論0 收藏0

  • Redux 基礎(chǔ) - react 全家桶學(xué)習(xí)筆記（一）

    摘要：二基礎(chǔ)就是一個(gè)普通的。其他屬性用來傳遞此次操作所需傳遞的數(shù)據(jù)，對此不作限制，但是在設(shè)計(jì)時(shí)可以參照標(biāo)準(zhǔn)。對于異步操作則將其放到了這個(gè)步驟為添加一個(gè)變化監(jiān)聽器，每當(dāng)?shù)臅r(shí)候就會(huì)執(zhí)行，你可以在回調(diào)函數(shù)中使用來得到當(dāng)前的。 注：這篇是16年10月的文章，搬運(yùn)自本人 blog...https://github.com/BuptStEve/... 零、環(huán)境搭建 參考資料 英文原版文檔 中文文檔 墻...

    aaron 評論0 收藏0

發(fā)表評論

0條評論

Magicer

男|高級講師

TA的文章

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