[轉載 fakefisk]

ReactJS介紹

引子

當你第一次看到 React 的時候，一定是十分懷疑的，特別是把 HTML 揉進代碼里違背了傳統(tǒng)的那些約定，看起來真的像是一個 “壞注意”。

但是這就是 React及其類似的框架，他們挑戰(zhàn)了那些約定規(guī)則，然后用這種更易接受的方式代替這些約定。
作為一個開發(fā)者，有時候改變思考方式是你向前走的一個必經之路。這就是 React 對我的影響，它建立在函數(shù)式編程上帶給了我很多有意思的想法。

基礎功能

在你能理解 React 是如何改變 Web 開發(fā)之前，這里有一些東西你需要知道的。React 它本身并不能完成所有的事情，它只能解決一些視圖上的問題，你仍然需要一些東西去幫助它完成事情。
最偉大的和最差勁的框架總是企圖給你建立一個籠子，當你在他們劃定的地盤里能夠完成它們期望處理的任何需求，一切都是很好的。但是，當你到達邊界的時候，就會開始有問題了。
在一個庫驅動開發(fā)方法內，你是不被限制的，最初你可能是高效地完成需求，但是伴隨時間的推進，問題開始變得嚴峻起來，你需要更多可行的選擇。

JSX 的基礎

React 為前端開發(fā)提供了一個組件為中心的方法，你可以為你的應用設計一個更小的組件，所有組件有各自的目的。甚至極端來說，一個組件可能包含它自身的邏輯，結構和基本的樣式。這里有個 JSX 的例子：

... <TodoItem className='urgent' owner={owner} task='Make a dinner' /> ...

你可以看到一個基本功能的 JSX，這里使用的是javascript，我們使用className 替代了class。此外，我們定義了一些自定義屬性 owner 和 task，owner 的值是從 JSX 環(huán)境中一個變量 owner 注入，而我們?yōu)?task 提供了一個固定的值。

在實踐中，你可以會更喜歡根據(jù)你的數(shù)據(jù)模型結構來稍微調整其結構，雖然是 React 進階的知識點了。

我們可以用那些 {} 來混合普通 JavaScript 代碼，我們可以用這個點像這樣去去渲染一個 TodoItem 列表（ES 語法）：

<ul> {todoItems.map( (todoItem, i) =><li key={'todoitem' + i}><TodoItem owner={todoItem.owner} task={todoItem.task} /></li> )} </ul>

你可能注意到這里有些特殊的地方。什么是 key 屬性？這是告訴 React 這個項的準確順序。如果你不像這樣提供列表項的唯一 Key 的話，React 會警告你：它沒辦法保證是正確的順序。

React 實際上要做的是在真實 DOM 上實現(xiàn)了虛擬 DOM（簡稱 VDOM）。 這是一個 DOM 的子集， React 能夠優(yōu)化它的渲染。這種優(yōu)化方法的主要優(yōu)勢是它讓 React 能夠避開困惱我們多年的 DOM 性能損耗。這就是 React 高性能的原因。

整體組件

為了讓你更加清楚了解組件是什么樣子，讓我們拓展 TodoItem 例子來感受一下（ES6 + JSX），我已經搞完了，然后我們來過一遍代碼看看：

var React = require('react');module.exports = React.createClass({getInitialState() {return {// 讓我們保持追蹤看看我們給項點了多少次贊likes: 0,};},render() {var owner = this.props.owner;var task = this.props.task;var likes = this.state.likes;return <div className='TodoItem'><span className='TodoItem-owner'>{owner}</span><span className='TodoItem-task'>{task}</span><span className='TodoItem-likes'>{likes}</span><span className='TodoItem-like' onClick={this.like}>Like</span></div>;},like() {this.setState({likes: this.state.likes + 1});}, });

在上面你可以看到一些基礎的 React 組件的特征。一開始我們創(chuàng)建了一個組件的類–通過React.createClass函數(shù)，然后我們在初始化的時候定義一些狀態(tài)，接著我們定義渲染方法render，最后我們?yōu)槲覀兊奶幚砥鱤andler，如果它們存在的話，定制了一些回調。在這個例子中，我決定去實施一個額外的功能，liking方法（點贊）。當前的這個實現(xiàn)只是保持了一個跟蹤點贊組件的計數(shù)。

在實踐中，你需要把點贊計數(shù)傳輸給后端，然后添加一些驗證，不過目前這個階段對于理解 State 在 React 中的是如何使用的已經是一個非常好的開端了。

稍作說明：在react 組件component官方文檔中， getInitialState 和 render 是 React 組件的生命周期一部分。組件component也有額外的能夠讓你去設置加載 jQuery 插件之類的適配器的鉤子。

在例子中的 CSS 的命名是根據(jù) Suit CSS 約定處理后的，這樣對我來說看起來非常清楚，這只是一種解決方案而已。

處理操作

現(xiàn)在讓我們開始修改我們的 TodoItems 的 owner。為了簡化這個目的，我們假設 owner 只是一個字符串而且只有一個。基于這個設計，在用戶界面里增加一個輸入框給用戶來修改用戶名，修改后是這樣的：

var React = require('react'); var TodoItem = require('./TodoItem.jsx');module.exports = React.createClass({getInitialState() {return {todoItems: [{task: 'Learn React',},{task: 'Learn Webpack',},{task: 'Conquer World',}],owner: 'John Doe',};},render() {var todoItems = this.state.todoItems;var owner = this.state.owner;return <div><div className='ChangeOwner'><input type='text' defaultValue={owner} onChange={this.updateOwner} /></div><div className='TodoItems'><ul>{todoItems.map((todoItem, i) =><li key={'todoitem' + i}><TodoItem owner={owner} task={todoItem.task} /></li>)}</ul></div></div>;},updateOwner() {this.setState({owner: e.target.value,});}, });

在render方法中，我們定義了一個Div和其中的輸入框。

當然我們可以把 TodoItems 和 ChangeOwner 分離出去，但是我暫時不這么做了。React 默認提供了單向數(shù)據(jù)綁定，關于某些其他的設置，這里有很多的說法。 React 提供了 ReactLink 幫助器helper來幫助我們處理這個特殊案例。

盡管雙向數(shù)據(jù)綁定的缺失–如angularJS和backbone等–聽起來讓人沮喪，但實際上并不是一件壞事，它能夠讓系統(tǒng)更加輕松的運行。你必須簡單地跟蹤流。這也是Flux 架構中的精彩部分。認識它的最簡單的方式是去想一個無限瀑布流，或者貪吃蛇。這就是 在React 的世界里，通常工作的流程。對比一下，雙向綁定方式讓人感覺更加雜亂混亂。

使用一個Mixin

如果我們想使用 ReactLink helper來幫助我們包裝DOM的話，就像下面這樣使用：

// ReactLink 是一個插件，所以我們需要把它引入。 var React = require('react/addons');...module.exports = React.createClass({mixins: [React.addons.LinkedStateMixin],...render() {var todoItems = this.state.todoItems;return <div><div className='ChangeOwner'><input type='text' valueLink={this.linkState('owner')} /></div><div className='TodoItems'><ul>{todoItems.map( (todoItem, i) =><li key={'todoitem' + i}><TodoItem owner={owner} task={todoItem.task} /></li>)}</ul></div></div>;}, });

現(xiàn)在我們可以跳過綁定 onChange 事件了，React.addons.LinkedStateMixin 封裝了邏輯。Mixins 給我們提供了一種封裝可以共享關注點，并能簡單重用的方法。

---

現(xiàn)在拓展例子已經非常容易了，你現(xiàn)在應該就可以拓展 Todo 列表，或者把抽取不同的部分分離到各種組件，這完全取決于你如何來開發(fā)。這里只是對此話題的一個簡單介紹。

測試

如果你對這個 Todo 應用是很認真的，那么我推薦 Jest，使用它來進行測試。剛開始讓測試運行起來可能有一點挑戰(zhàn)，但是在你學習了解了它的一些基礎的 API 之后，就會變得簡單了。最基本的是你要實例化一個帶有一些屬性的組件，然后用 Jest 查詢 DOM，最后斷言DOM中的值恰如你期望的值。

當你站在組件層級之上時，就有了比如類似 Selenium 的工具，你可以在更高層級使用標準的端對端測試工具。

Flux 架構及其變種

就想你在上面看到的，把一些組件放到一起就可以開始創(chuàng)建一個應用，你可以用 props 和 state 做的更多，或者在 getInitialState 中使用 AJAX 加載數(shù)據(jù)然后傳給其他組件。這些使用一段時間之后可能會覺得有些笨拙。為什么？比如，我們的組件們需要知道如何和后端通訊。

所以出現(xiàn)了 Flux 架構和它的一些演化變種，我會介紹 Reflux ，一種簡化的 Flux 變種。在你理解這個簡化的版本后，還可以瀏覽這個 understanding Flux 來完整詳盡全面了解 Flux。

并且，為了查看剛才我們討論的試圖組件，Reflux 引入了 Actions 和 Stores 的概念。
現(xiàn)在，整個數(shù)據(jù)流是這樣的：組件 -> Actions -> Stores -> 組件。這樣你可以在一個組件中控制觸發(fā)一些 Action 然后執(zhí)行一些操作（比如 PUT）然后更新 Store 的狀態(tài)。而狀態(tài)的更新再被傳播給監(jiān)聽 Store 的那些組件們。

在我們的這個 Todo 例子中，我們定義了基本的 TodoActions， 比如創(chuàng)建、更新、刪除之類的。我們也有個 TodoStore，它是整個 TodoList 的數(shù)據(jù)結構中心，組件們會讀取那里的數(shù)據(jù)，然后適當?shù)谜宫F(xiàn)出來。

使用Reflux 的開發(fā)，舊不在這里詳細講述了，我只是想說明如何處理從純 React 擴大的一種可能的方式。你需要去探索各種選擇，然后深入理解那些架構。那些想法都差不多，就是細節(jié)不太一樣，都有各自的一些缺點有待考略。

總結

以上是生活随笔為你收集整理的Introduction-to-React-JS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。