ReactJS入門基礎
|
渲染這倆字可能在很多地方都見過。但可能不太理解是啥意思。 那麽首先我們來理解一下渲染。 渲染 我覺得這樣理解比較通俗。 我們做一個汽車，開始是沒有噴漆的（沒有css） 只是些框框架架（HTML標簽）。那麽網頁加載就是首先加載完HTML元素，其次是css，css去遍歷渲染每個對應元素的樣式讓其看起來就是我們所想看到的效果一樣。不同瀏覽器的渲染方式不一樣，渲染機制也不一樣。 簡單來將一個完整的HTML頁面渲染完成是有2個東西的。一個HTML元素加載完成，一個是CSS樣式加載完成。其次才是JS，如果JS寫在頁面頂部在css元素加載之前 那就會在其執行完後在執行後面的渲染，會讓頁面的加載斷斷續續。所以現在很多JS都是建議放在頁面之前 而不是在header裏。更不能放在樣式加載之前。 為什麽要說渲染呢，我認為ReactJS就是渲染器。 |
下面我們來說一下如何入門。首先要做的是下載文件。你可以去官網下載最新版本
http://facebook.github.io/react/
首先我們要導入三個庫（實際路徑以自己文件為準）
<script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script>
react.min.js 是 React 的核心庫。
react-dom.js提供與 DOM 相關的功能。
browser.js 的作用是將 JSX 語法轉為 JavaScript 語法。
React JSX
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優點：
- JSX 執行更快，因為它在編譯為 JavaScript 代碼後進行了優化。
- 它是類型安全的，在編譯過程中就能發現錯誤。
- 使用 JSX 編寫模板更加簡單快速。
使用JSX
<div id="example"></div>ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。
我們可以在以上代碼中嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。
上面代碼將一個 h1 標題，插入id為example中.
運行結果：
獨立文件
我們也可以將React JSX 代碼寫在一個獨立文件裏，例如我們創建一個 helloworld_react.js 文件，代碼如下：
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) );
然後可以在HTML中引入
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
JSX 語法
JSX的語法，它允許 HTML 與 JavaScript 的混寫。
遇到 HTML 標簽（以 < 開頭的），就用 HTML 規則解析；遇到代碼塊（以 { 開頭的），就用 JavaScript 規則解析。
var names = [‘lisi‘, ‘wanger‘, ‘zhangsan‘]; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById(‘example‘) );
JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組，則會展開這個數組的所有成員。上面程序運行結果如下
組件
React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById(‘example‘) );
以上代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例。所有組件類都必須有自己的 render 方法，用於輸出組件。
註意，組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。因為原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭另外，組件類只能包含一個頂層標簽，否則也會報錯。
組件的用法與原生的 HTML 標簽完全一致，如果我們需要向組件傳遞參數，可以使用 this.props 對象。以上實例中 name 屬性通過 this.props.name 來獲取。
復合組件
我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。
以下實例我們實現了輸出網站名字和網址的組件：
var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } });
ReactDOM.render( <WebSite name="博客園" site=" http://www.cnblogs.com" />, document.getElementById(‘example‘) );
實例中 WebSite 組件使用了 Name 和 Link 組件來輸出對應的信息，可以理解為 WebSite 擁有 Name 和 Link 的實例。
以上就是RejectJS入門基礎，看懂就可以繼續深銳學習了。
其實學習ReactJS的要求並不高。有HTML5，CSS和JavaScript的基礎就可以了
ReactJS入門基礎