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

Magicer 發(fā)布于2019-08-21 10:28 / 2060人閱讀

摘要：我們使用最基本的事就是用來(lái)展現(xiàn)數(shù)據(jù)。使得展現(xiàn)數(shù)據(jù)變得簡(jiǎn)單，并且當(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最基本的事就是用來(lái)展現(xiàn)數(shù)據(jù)。React使得展現(xiàn)數(shù)據(jù)變得簡(jiǎn)單，并且當(dāng)數(shù)據(jù)改變時(shí)，React能自動(dòng)保持UI的更新。

開(kāi)始

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

#index.html



    
    React

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

#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

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

React.render

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

功能

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


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

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

打開(kāi)瀏覽器看看效果：發(fā)現(xiàn)時(shí)間一直在變化，而input框，無(wú)論我們?cè)趺床僮鳎恢北３衷瓨硬蛔儭?br> 這就奇怪了，按照我們固有的想法，應(yīng)該是每隔500毫秒，重新替換div當(dāng)中的內(nèi)容啊，為啥時(shí)間一直在變，而輸入框一直不變呢？
這就是React的神奇之處了。

響應(yīng)式更新

上面的例子中，我們只是創(chuàng)建了個(gè)組件，并將它插入DOM中，并沒(méi)有寫(xiě)別的代碼。而奇特的效果都是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)致頁(yè)面反復(fù)repaint。React聲稱(chēng)自己很快，正是基于此。
回過(guò)頭來(lái)看看上面的例子，為啥子input不變，而時(shí)間一直在變化？input相對(duì)于這個(gè)組件來(lái)說(shuō)，是它的屬性，并且沒(méi)有嵌入動(dòng)態(tài)的數(shù)據(jù)。而在React的設(shè)定中，屬性是不可變的。稍稍改變下JavaScript代碼，再來(lái)看下效果：

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            
            Hello,!
            It is {this.props.date.toTimeString()}
            
        );
    }
});

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

組件類(lèi)似于函數(shù)

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

  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語(yǔ)法概述

細(xì)心的人會(huì)發(fā)現(xiàn)，我們編寫(xiě)的JavaScript代碼中，所有的模板內(nèi)容都沒(méi)有加引號(hào)。這種JavaScript和HTML混寫(xiě)的方式就是所謂的JSX語(yǔ)法了，React獨(dú)創(chuàng)。
這種語(yǔ)法瀏覽器是不識(shí)別的，引入我們編寫(xiě)的JavaScript文件的時(shí)候需要指定type類(lèi)型為text/jsx，同時(shí)還要需要引入JSXTransformer.js將JSX語(yǔ)法轉(zhuǎn)化為真正的JavaScript代碼。當(dāng)然了，這個(gè)轉(zhuǎn)化過(guò)程是需要花費(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ù)雜，使用模板語(yǔ)言會(huì)使展現(xiàn)變得笨重。
React解決這個(gè)問(wèn)題的方式就是：直接通過(guò)JavaScript代碼生成HTML和組件樹(shù)，這樣的話(huà)，你就可以使用JavaScript富豐的表達(dá)力去構(gòu)建UI。為了使這個(gè)過(guò)程變得更簡(jiǎn)單，React創(chuàng)建了類(lèi)似HTML的語(yǔ)法去構(gòu)建節(jié)點(diǎn)樹(shù)，也就是JSX了。
JSX語(yǔ)法是可選的，也就是說(shuō)你也可以不使用，直接寫(xiě)JavaScript代碼?？磦€(gè)對(duì)比例子：

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

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

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

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

react-tools

grunt-react

gulp-react

參考資料：
Displaying Data

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

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

登陸后可評(píng)論

0條評(píng)論

Magicer

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

多態(tài)

閱讀 2705·2021-11-24 09:38
CSS實(shí)例詳解：Flex布局

閱讀 2676·2019-08-30 15:54
white-space、word-wrap和word-break的簡(jiǎn)單整理

閱讀 1039·2019-08-30 15:52
前端面試每日3+1——第118天

閱讀 1994·2019-08-30 15:44
Flex布局入門(mén)

閱讀 2801·2019-08-30 13:48
css選擇器總結(jié)

閱讀 866·2019-08-29 16:21
Sass 語(yǔ)法規(guī)則

閱讀 1096·2019-08-29 14:03
「CSS」DOM2 級(jí)樣式

閱讀 2282·2019-08-28 18:15

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

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

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

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

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

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

0條評(píng)論

Magicer

男|高級(jí)講師

TA的文章

多態(tài)

CSS實(shí)例詳解：Flex布局

white-space、word-wrap和word-break的簡(jiǎn)單整理

前端面試每日3+1——第118天

Flex布局入門(mén)

css選擇器總結(jié)

Sass 語(yǔ)法規(guī)則

「CSS」DOM2 級(jí)樣式

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！