React學習筆記—數據展現

時間 2019-12-10

標籤 react 學習筆記數據展現欄目 React 简体版

原文原文鏈接

咱們使用UI最基本的事就是用來展示數據。React使得展示數據變得簡單，而且當數據改變時，React能自動保持UI的更新。html

開始

建立一個簡單的Demo：react

#index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>

<div id="example"></div>

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>
</body>
</html>

之後全部代碼示例的HTML都是用上面的代碼，只關注JavaScript的編寫。git

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>
            Hello,<input type="text" placeholder="Your name here" />!
            It is {this.props.date.toTimeString()}
            </p>
        );
    }
});

setInterval(function () {
    React.render(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
    );
}, 500);

React.createClass

用來建立一個組件類，前面也說了，編寫React代碼主要就是構建通用的組件。github

React.render

將React的模板轉化爲HTML，並插入到相應的DOM結構中。npm

功能

咱們大概瞭解到這段代碼的功能，即便以前徹底沒有接觸過React。其實就是每隔500毫秒將下面這個結構：gulp

<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>

插入到下面的結構中：瀏覽器

<div id="example"></div>

打開瀏覽器看看效果：發現時間一直在變化，而input框，不管咱們怎麼操做，一直保持原樣不變。
這就奇怪了，按照咱們固有的想法，應該是每隔500毫秒，從新替換div當中的內容啊，爲啥時間一直在變，而輸入框一直不變呢？
這就是React的神奇之處了。app

響應式更新

上面的例子中，咱們只是建立了個組件，並將它插入DOM中，並無寫別的代碼。而奇特的效果都是React幫咱們實現的。
除非有必要，不然React是不會直接去操做DOM的。React使用了內部的虛擬DOM，當數據發生改變，先在虛擬DOM中計算變化，最後將變更的部分反應到真實的DOM中。咱們知道，頻繁操做DOM代價是昂貴的，它會致使頁面反覆repaint。React聲稱本身很快，正是基於此。
回過頭來看看上面的例子，爲啥子input不變，而時間一直在變化？input相對於這個組件來講，是它的屬性，而且沒有嵌入動態的數據。而在React的設定中，屬性是不可變的。稍稍改變下JavaScript代碼，再來看下效果：函數

#app.js
var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>
            Hello,<input type="text" placeholder="Your name here" value={this.props.date.toTimeString()}/>!
            It is {this.props.date.toTimeString()}
            </p>
        );
    }
});

setInterval(function () {
    React.render(
        <HelloWorld date={new Date()} />,
        document.getElementById('example')
    );
}, 500);

組件相似於函數

React的組件很簡明。能夠把它看做有着props和state狀態而且能夠返回HTML結構的函數。由於組件很簡明，因此很容易就能夠看出它在幹什麼。grunt

React組件的render方法中，返回的結構只能有一個根節點。

#正確的
var HelloWorld = React.createClass({
    render: function () {
        return (
          <div>
              <div></div>
          </div>
        );
    }
});

#錯誤的
var HelloWorld = React.createClass({
    render: function () {
        return (
          <div></div>
          <div></div>
        );
    }
});

JSX語法概述

細心的人會發現，咱們編寫的JavaScript代碼中，全部的模板內容都沒有加引號。這種JavaScript和HTML混寫的方式就是所謂的JSX語法了，React首創。
這種語法瀏覽器是不識別的，引入咱們編寫的JavaScript文件的時候須要指定type類型爲text/jsx，同時還要須要引入JSXTransformer.js將JSX語法轉化爲真正的JavaScript代碼。固然了，這個轉化過程是須要花費時間的。

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>

React的做者認爲，組件應該同關注分離，而不是同模板和展示邏輯分離。結構化標記和生成結構化標記的代碼是緊密關聯的，此外，展示邏輯通常都很複雜，使用模板語言會使展示變得笨重。
React解決這個問題的方式就是：直接經過JavaScript代碼生成HTML和組件樹，這樣的話，你就可使用JavaScript富豐的表達力去構建UI。爲了使這個過程變得更簡單，React建立了相似HTML的語法去構建節點樹，也就是JSX了。
JSX語法是可選的，也就是說你也能夠不使用，直接寫JavaScript代碼。看個對比例子：

#JSX語法
React.render(
    <div className="c-list">content</div>,
    document.getElementById('example')
);

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

這樣簡單的例子，咱們都能感受到JSX更加的語義化，更別說複雜的組件了。因此強烈建議使用JSX。
前面說到JS的引入

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>
<script src="js/app.js" type="text/jsx"></script>

生成環境則不能這麼幹，由於JSX的轉化是須要時間的。線上的代碼應該是直接可執行的，咱們應該在離線環境下提早轉化，這裏就要使用到工具了。

參考資料：
Displaying Data

1. react展現數據
2. react+ react Hooks學習筆記
3. react學習筆記
4. React學習筆記
5. React 學習筆記
6. React學習筆記②
7. react 學習筆記
8. React學習筆記③
9. 【學習筆記】React
10. React學習筆記。
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• Flink 數據傳輸及反壓詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。