資訊專欄INFORMATION COLUMN
摘要：我們使用最基本的事就是用來展現數據。使得展現數據變得簡單，并且當數據改變時，能自動保持的更新。使用了內部的虛擬，當數據發生改變，先在虛擬中計算變化，最后將變動的部分反應到真實的中。可以把它看作有著和狀態并且可以返回結構的函數。
我們使用UI最基本的事就是用來展現數據。React使得展現數據變得簡單，并且當數據改變時，React能自動保持UI的更新。
開始創建一個簡單的Demo：
#index.html
React
以后所有代碼示例的HTML都是用上面的代碼，只關注JavaScript的編寫。
#app.js
var HelloWorld = React.createClass({
render: function () {
return (
Hello,!
It is {this.props.date.toTimeString()}
);
}
});
setInterval(function () {
React.render(
React.createClass
用來創建一個組件類，前面也說了，編寫React代碼主要就是構建通用的組件。
React.render將React的模板轉化為HTML，并插入到相應的DOM結構中。
功能我們大概了解到這段代碼的功能，即使之前完全沒有接觸過React。其實就是每隔500毫秒將下面這個結構：
Hello,! It is {this.props.date.toTimeString()}
插入到下面的結構中：
打開瀏覽器看看效果：發現時間一直在變化，而input框，無論我們怎么操作，一直保持原樣不變。
這就奇怪了，按照我們固有的想法，應該是每隔500毫秒，重新替換div當中的內容啊，為啥時間一直在變，而輸入框一直不變呢？
這就是React的神奇之處了。
上面的例子中，我們只是創建了個組件，并將它插入DOM中，并沒有寫別的代碼。而奇特的效果都是React幫我們實現的。
除非有必要，否則React是不會直接去操作DOM的。React使用了內部的虛擬DOM，當數據發生改變，先在虛擬DOM中計算變化，最后將變動的部分反應到真實的DOM中。我們知道，頻繁操作DOM代價是昂貴的，它會導致頁面反復repaint。React聲稱自己很快，正是基于此。
回過頭來看看上面的例子，為啥子input不變，而時間一直在變化？input相對于這個組件來說，是它的屬性，并且沒有嵌入動態的數據。而在React的設定中，屬性是不可變的。稍稍改變下JavaScript代碼，再來看下效果：
#app.js
var HelloWorld = React.createClass({
render: function () {
return (
Hello,!
It is {this.props.date.toTimeString()}
);
}
});
setInterval(function () {
React.render(
組件類似于函數
React的組件很簡明。可以把它看作有著props和state狀態并且可以返回HTML結構的函數。因為組件很簡明，所以很容易就可以看出它在干什么。
React組件的render方法中，返回的結構只能有一個根節點。
#正確的
var HelloWorld = React.createClass({
render: function () {
return (
);
}
});
#錯誤的
var HelloWorld = React.createClass({
render: function () {
return (
);
}
});
JSX語法概述
細心的人會發現，我們編寫的JavaScript代碼中，所有的模板內容都沒有加引號。這種JavaScript和HTML混寫的方式就是所謂的JSX語法了，React獨創。
這種語法瀏覽器是不識別的，引入我們編寫的JavaScript文件的時候需要指定type類型為text/jsx，同時還要需要引入JSXTransformer.js將JSX語法轉化為真正的JavaScript代碼。當然了，這個轉化過程是需要花費時間的。
React的作者認為，組件應該同關注分離，而不是同模板和展現邏輯分離。結構化標記和生成結構化標記的代碼是緊密關聯的，此外，展現邏輯一般都很復雜，使用模板語言會使展現變得笨重。
React解決這個問題的方式就是：直接通過JavaScript代碼生成HTML和組件樹，這樣的話，你就可以使用JavaScript富豐的表達力去構建UI。為了使這個過程變得更簡單，React創建了類似HTML的語法去構建節點樹，也就是JSX了。
JSX語法是可選的，也就是說你也可以不使用，直接寫JavaScript代碼?？磦€對比例子：
#JSX語法
React.render(
content,
document.getElementById("example")
);
#plain JavaScript
React.render(
React.createElement("div", {className: "c-list"}, "content"),
document.getElementById("example")
);
這樣簡單的例子，我們都能感覺到JSX更加的語義化，更別說復雜的組件了。所以強烈建議使用JSX。
前面說到JS的引入
生成環境則不能這么干，因為JSX的轉化是需要時間的。線上的代碼應該是直接可執行的，我們應該在離線環境下提前轉化，這里就要使用到工具了。
react-tools
grunt-react
gulp-react
參考資料：
Displaying Data
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85596.html
摘要：今天給大家帶來了好程序員實戰項目商城管理后臺。配合項目學習會讓你更快掌握它的使用方法下面就來看看好程序員這套實戰項目課程介紹好程序員項目本項目是一個使用開發的商城系統的管理后臺，里面登錄判斷，接口調用，數據展示和編輯，文件上傳等后臺功能。 眾所周知，項目經驗對于一個程序員變得越來越重要。在面...
摘要：使用，不一定非要使用語法，可以使用原生的進行開發。注意標簽的屬性和，需要寫成和。因為兩個屬性是的保留字和關鍵字。在的設定中，初始化完后，是不可變的。改變會引起無法想象的后果。重要的是這個過程是由操控的，不是手動添賦值的屬性。 深入JSX JSX可以看作JavaScript的拓展，看起來有點像XML。使用React，可以進行JSX語法到JavaScript的轉換。 Why JSX? ...
摘要：說的通俗點如果組件出現在了組件的方法中，那么組件就是所有者。所有者和被所有者關系是針對組件的，父子關系是針對結構的。子調節調節發生在更新的過程中。帶有狀態的子節點對大部分組件來說，問題不大。應該加在組件上，而不是標簽上。 關注分離 我們在編程的時候碰到相同的功能，可以通過抽出公共方法或者類來實現復用。當我們構建新的組件的時候，盡量保持我們的組件同業務邏輯分離，將相同功能的組件抽出一個...
摘要：所以筆者選擇了，為什么會選擇一是因為它是阿里出品，經歷了一年左右的打磨已經完全適應在使用其次是它支持自由定制，不會像那樣高度封裝，所以在開發復雜圖表的時候會更加得心應手。只是阿里圖表庫中的一員。 實際上，在數據可視化這一塊筆者并沒有很多的開發經歷和經驗，不過正是因為這個問題筆者才決定學習一門數據可視化框架來彌補自己在這一方面的不足。在這個大數據統治的時代，數據能給我們提供前所未有的便捷...
摘要：二基礎就是一個普通的。其他屬性用來傳遞此次操作所需傳遞的數據，對此不作限制，但是在設計時可以參照標準。對于異步操作則將其放到了這個步驟為添加一個變化監聽器，每當的時候就會執行，你可以在回調函數中使用來得到當前的。 注：這篇是16年10月的文章，搬運自本人 blog...https://github.com/BuptStEve/... 零、環境搭建 參考資料 英文原版文檔 中文文檔 墻...
閱讀 2571·2021-11-24 09:38
閱讀 2601·2019-08-30 15:54
閱讀 915·2019-08-30 15:52
閱讀 1909·2019-08-30 15:44
閱讀 2712·2019-08-30 13:48
閱讀 768·2019-08-29 16:21
閱讀 996·2019-08-29 14:03
閱讀 2212·2019-08-28 18:15
