標籤：
系列學習react 翻譯地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts
我是初學者，英語也不是很好，不過一直強迫自己看英文文檔。
這是理解翻譯，翻譯的不好，請見諒！（）中的是我翻譯過程中理解，參考下，有什麼說的不對的歡迎指點下！
第一節：如何開始react和瞭解react的概念
1.React是什麼
react是Facebook 開發出來用於促進UI互動，建立帶有狀態的，可複用的UI組建的UI庫！Feacebook的產品廣泛運用這技術，Instagram.com（一款圖片分享應用）基於react開發出來的。（這裡的理解痛點在於 帶有狀態的，可複用的UI組件。也就是一個UI組件，它帶有狀態屬性，並且可重複使用！）
react的最大的賣點就是，react不僅可以在瀏覽器端使用，還可以在服務端使用，還可以兩端一起使用！
react的底層的概念：react運用的是Virtual DOM（虛擬DOM），然後根據UI組件的狀態變化，有選擇的渲染DOM的節點樹！它儘可能的操作最少的DOM來更新UI組件。
2.虛擬DOM是如何工作的？
想象下，你建立一個關於人的對象。這對象擁有人的每一個屬性，然後這對象就像鏡子一樣，映射出一些人中每一個人的所有屬性。這就是React與DOM的主要關係。
（我是這麼理解的，React的虛擬DOM儘可能的擁有DOM的一切屬性，然後在應用中使用虛擬DOM映射出當前應用需要的所有DOM節點！）
現在，如果我們給這個對象，添加一個鬍子、一些肱二頭肌、Steve Buscemi 的眼睛（給人對象的某個執行個體添加這些）。在react中，當我們需要這些變化產生，（react）會發生兩件事。第一件事，就是react會運行"差異"演算法，也就是前跟後發生了哪些變化。第二件事，就是把這種"差異"演算法的出的結果更新到DOM上（應該是虛擬DOM）
React的這種運行模式不同於依照變化前的人，然後開始重新把這些變化後的人塑造出來（我是這裡理解的，原本的DOM要變化一個節點，需要建立一個節點再把變化加上去，然後再去替換之前的節點。而react的方式，就是在它自己的虛擬DOM上直接把需要變化的地方，變化下OK了）。它只需要換下臉和手臂。這就意味著，如果你想要在input輸入框中把一些文本渲染出來，只要輸入框的父節點沒有安排改變，它將會保持原狀！（只修改要變化的，不要變化的保持原狀！）
3.開始React的準備
第一步，下載開發包。:http://facebook.github.io/react/downloads/react-0.11.2.zip
你也可以用bower安裝新版的react。
bower install react
第二步，在頁面中引入react庫。
在頁面中引入react庫，分別引入react.js和JSXTransformer.js這兩個檔案。然後在自己的type為text/jsx的srcipt標籤中寫應用組件。
<!DOCTYPE html><html><head><title></title><script src="bower_components/react/JSXTransformer.js"></script><script src="bower_components/react/react.js"></script></head><body><div id="mount-point"></div><script type="text/jsx">//這裡的type是text/jsx//這裡你的代碼</script></body></html>
在react中，組件都是綁定到一個元素中，上面的例子就是用id 為mount-point的div作為組件的容器。
這種事開始react的最簡單的方法。但在實際應用中，使用Browserify或者webpack把組件代碼放到單獨檔案中的方法更好。
4.React的基礎
現在我開始一個簡單的展示：
<script type="text/jsx"> React.render(<h1>Hellow, World!</h1>,document.getElementById(‘mount-point‘) )</script>
用瀏覽器開啟html頁面，效果就是：
5.JSX
這種寫法叫JSX。這是一種javascript XML文法的轉換（javascript 中的XML文法）。這可以讓你在javascript中編寫html標籤。其實你編寫的是基於對象展現的XML。
對於常規的html標籤，在JSX中class屬性是className，for屬性是htmlFor。應為class、for等都是javascript的保留字。更多的不同你可以看這裡 （http://facebook.github.io/react/docs/jsx-gotchas.html）
如果你不用JSX文法編寫，用存粹的javascript的文法你可以這麼寫。
<script type="text/javascript"> React.render(React.DOM.h1(null, ‘Hello, World!‘),document.getElementById(‘mount-point‘) )</script>
在網頁中也能顯示出Hello， World！
6.組件
當時調用render的方法時，它的第一個參數就是就要選人的組件。第二個參數就是你想定綁定的DOM節點。
我們可以使用createClass方法建立一個自訂的組件。它接受一個對象格式的參數。例子如下：
var MyComponent = React.createClass({ render: function(){ return ( <h1>Hello, world!</h1> ); }});建立了一個組件之後，可以把MyComponent渲染到我們的DOM中：
React.render( <MyComponent/>, document.getElementById(‘mount-point‘))
7.Props
當我們使用定義的組件時，我們可以給它添加props屬性。這屬性非常有作用，在我們的組件中作為this.props。當我們想要渲染動態資料就使用它。
列子如下：
var MyComponent = React.createClass({render: function () {return (<h1>Hello, {this.props.name}!</h1>);}});React.render(<MyComponent name="Ailen"/>,document.getElementById(‘mount-point‘))
顯示結果就是：
8.規範，生命週期和狀態
建立一個組件， render 方法是唯一需要的規範。但我們的組件想要完成其他一些事情時，這裡有幾個生命週期方法和規範供組件有效完成這些事情。
生命週期方法：
1.componentWillMount（組件將要安裝綁定）：在用戶端和服務端 組件被渲染之前，componentWillMount執行一次。
2.componentDidMount （綁定安裝過的組件）： 組件渲染完成後僅在用戶端compoentDidMount調用一次。
3.shouldComponentUpdate（應該更新的組件）：傳回值決定組件是否要更新。
4.componentWillUnmount（將要取消安裝綁定的組件）：優先調用要取消安裝綁定的組件。
（這裡我也是一知半解）
Specs（規格，規範）1.getInitialState： 為狀態返回一個初始化值。
2.getDefaultProps：如果為提供props，設定回退的props值。
3.mixins： 通過一個關於對象的數組來向外延展群組件的功能性。
關於更多的specs 和 lifecycle方法可以點選連結：http://facebook.github.io/react/docs/component-specs.html
State（狀態）
每個組件都有一個state對象和一個props對象。state使用setState方法，調用setState來觸發視圖更新和React的互動性。如果我們想在互動發生之前設定一個預設的狀態，可以使用getInitialState方法。下面舉例示範組件的狀態：
var MyComponent = React.createClass({getInitialState: function () {return {count: 5}},render: function () {return (<h1>{this.state.count}</h1>)}});React.render(<MyComponent/>, document.getElementById(‘mount-point‘));
9.Event（事件）
react也提供一套能夠相容各瀏覽器的事件系統。這些事件作為屬性添加組件上可以觸發方法。
下面我們通過事件來實現count自增。
var MyComponent = React.createClass({incrementCount: function () {//修改state 通過setState方法this.setState({count: this.state.count + 1})},//getInitialState 初始化state的值getInitialState: function () {return {count: 5}},render: function () {return (
//友情提醒、react的組件必須用一個一個容器包裹下。也就是這裡的div。如果只有一個標籤例如：<h1>hello, world!</h1>就不需要div包裹了。<div><h1>{this.state.count}</h1><button type="button" onClick={this.incrementCount} >Increment</button></div>)}});React.render(<MyComponent/>, document.getElementById(‘mount-point‘));
感覺很酷哦！
10.Unidirectional Data Flow(單向資料流)
react中，應用的資料傳遞是單向的通過state和props對象，不同於angular的雙向資料繫結。單向資料流的意思就是，在一個多組件構成的應用中，每一個父組件負責管理state並且通過props傳遞給下一層組件。
狀態（state）通過setState方法來更新，來確保UI更新發生。如果有必要state的最終結果值應該被當作 子組件的屬性 傳遞給子組件，在子組件中通過this.props來擷取值。
下面來舉例：
var FilteredList = React.createClass({//自訂的過濾方法filteredList: function (event) {var updateList = this.state.initialItems;//根據輸入框的值來過濾出結果updateList = updateList.filter(function (item) {return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;});//將過濾出的值通過setState方法來更新statethis.setState({items: updateList});},//state 初始化方法getInitialState: function () {return {initialItems: ["Apples", "Broccoli", "Chicken", "Duck", "Eggs", "Fish", "Granola","Hash Browns"],items: []}},//在組件渲染之前執行該方法componentWillMount: function () {this.setState({items: this.state.initialItems});},render: function () {//onChange 事件來執行filteredList方法//再將更新過的state 作為List組件的屬性傳遞給List組件return (<div class="filter-class"><input type="text" placeholder="Search" onChange={this.filteredList} /><List items={this.state.items} /></div>)}})var List = React.createClass({render: function () {//List組件中通過this.props來擷取到FilteredList傳遞進來的值return (<ul>{this.props.items.map(function (item) {return <li key={item}>{item}</li>})}</ul>)}});React.render(<FilteredList/>, document.getElementById("mount-point"));
運行結果：
感覺還是不錯的哦
11.總結
以上的都是一些關於react的基礎。有時間，有問題就去查看React API："http://facebook.github.io/react/docs/top-level-api.html"
最好也去瞭解下關於jsx：http://facebook.github.io/react/docs/jsx-in-depth.html
下一節，我將翻譯關於學習通過express建立應用，並在服務端使用react渲染，跟前用戶端一樣，然後通過socket.io來使這兩端保持同步。
翻譯不是很好！英語水平有限啊！我會盡量將自己的理解放入進去！
上面的代碼都是我自己運行過的！
React學習系列一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
