免費AI編程助手
顯示數(shù)據(jù)
用戶界面能做的最基礎的事就是顯示一些數(shù)據(jù)。React 讓顯示數(shù)據(jù)變得簡單，當數(shù)據(jù)變化的時候，用戶界面會自動同步更新。
開始
讓我們看一個非常簡單的例子。新建一個名為 hello-react.html 的文件，代碼內(nèi)容如下：
<!DOCTYPE html><html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-{{site.react_version}}.js" rel="external nofollow" ></script>
<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js" rel="external nofollow" ></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx"> // ** 在這里替換成你的代碼 **
</script>
</body></html>在接下去的文檔中，我們只關注 JavaScript 代碼，假設我們把代碼插入到上面那個模板中。用下面的代碼替換掉上面用來占位的注釋。
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);被動更新 (Reactive Updates)
在瀏覽器中打開 hello-react.html ，在輸入框輸入你的名字。你會發(fā)現(xiàn) React 在用戶界面中只改變了時間， 任何你在輸入框輸入的內(nèi)容一直保留著，即使你沒有寫任何代碼來完成這個功能。React 為你解決了這個問題，做了正確的事。
我們想到的方法是除非不得不操作 DOM ，React 是不會去操作 DOM 的。它用一種更快的內(nèi)置仿造的 DOM 來操作差異，為你計算出出效率最高的 DOM 改變。
對這個組件的輸入稱為 props - "properties"的縮寫。得益于 JSX 語法，它們通過參數(shù)傳遞。你必須知道在組件里，這些屬性是不可改變的，也就是說this.props 是只讀的。
組件就像是函數(shù)
React 組件非常簡單。你可以認為它們就是簡單的函數(shù)，接受 props 和 state (后面會討論) 作為參數(shù)，然后渲染出 HTML。正是應為它們是這么的簡單，這使得它們非常容易理解。
注意:
只有一個限制: React 組件只能渲染單個根節(jié)點。如果你想要返回多個節(jié)點，它們必須被包含在同一個節(jié)點里。
JSX 語法
我們堅信組件是正確方法去做關注分離，而不是通過“模板”和“展示邏輯”。我們認為標簽和生成它的代碼是緊密相連的。此外，展示邏輯通常是很復雜的，通過模板語言實現(xiàn)這些邏輯會產(chǎn)生大量代碼。
我們得出解決這個問題最好的方案是通過 JavaScript 直接生成模板，這樣你就可以用一個真正語言的所有表達能力去構建用戶界面。為了使這變得更簡單，我們做了一個非常簡單、可選類似 HTML 語法 ，通過函數(shù)調用即可生成模板的編譯器，稱為 JSX。
JSX 讓你可以用 HTML 語法去寫 JavaScript 函數(shù)調用 為了在 React 生成一個鏈接，通過純 JavaScript 你可以這么寫：
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')。
通過 JSX 這就變成了
<a rel="external nofollow" target="_blank" >Hello React!</a>。
我們發(fā)現(xiàn)這會使搭建 React 應用更加簡單，設計師也偏向用這用語法，但是每個人可以有它們自己的工作流，所以JSX 不是必須用的。
JSX 非常??；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，請看深入理解 JSX?；蛘咧苯邮褂迷诰€ JSX 編譯器觀察變化過程。
JSX 類似于 HTML，但不是完全一樣。參考 JSX 陷阱 學習關鍵區(qū)別。
最簡單開始學習 JSX 的方法就是使用瀏覽器端的 JSXTransformer。我們強烈建議你不要在生產(chǎn)環(huán)境中使用它。你可以通過我們的命令行工具 react-tools 包來預編譯你的代碼。
沒有 JSX 的 React
你完全可以選擇是否使用 JSX，并不是 React 必須的。你可以通過 React.createElement 來創(chuàng)建一個樹。第一個參數(shù)是標簽，第二個參數(shù)是一個屬性對象，每三個是子節(jié)點。
var child = React.createElement('li', null, 'Text Content');var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.getElementById('example'));方便起見，你可以創(chuàng)建基于自定義組件的速記工廠方法。
var Factory = React.createFactory(ComponentClass);
...var root = Factory({ custom: 'prop' });
React.render(root, document.getElementById('example'));React 已經(jīng)為 HTML 標簽提供內(nèi)置工廠方法。
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
更多建議：