簡(jiǎn)評(píng)：據(jù)作者說(shuō)望忆，練成絕招后副作用就是手會(huì)發(fā)紅，屁股變壞竿秆。
所有你所需要知道的關(guān)于 React 的內(nèi)容可以歸結(jié)為 五個(gè)關(guān)鍵概念启摄。
這五個(gè)關(guān)鍵概念就是：
- 組件
- JSX 語(yǔ)法
- 屬性 & 狀態(tài)
- 組件 API
- 組件類型
概念 #1: React 組件是如何工作的
你所需要了解的關(guān)于 React 的第一件事就是關(guān)于組件的事。你的 React 代碼庫(kù)就是一大堆大組件調(diào)用更小的組件幽钢。
什么是組件呢歉备？組件完美的例子就是常見(jiàn)的 <select> HTML 元素。它不僅有視覺(jué)輸出（灰色框匪燕，文字標(biāo)簽蕾羊，向下的箭頭組成了這個(gè)元素）——而且還處理自己的開(kāi)閉邏輯。
現(xiàn)在想象用自己的樣式和行為組建自定義的 <select> 元素谎懦。
那么肚豺，這恰恰就是 React 讓你做的事。一個(gè) React 組件是一個(gè)單一的對(duì)象界拦，不僅輸出像傳統(tǒng)模板一樣的 HTML，而且包括了控制該輸出的所有代碼梗劫。
在實(shí)踐中享甸，寫(xiě) React 組件最為普遍的方式就是用 ES6 class 包含一個(gè)返回 HTML 的 render 方法（還有一個(gè)超級(jí)秘密的函數(shù)的方式截碴，但你要等到第四個(gè)概念才能了解它）：
class MyComponent extends React.Component {
render() {
return <p>Hello World!<p>;
}
}
概念 #2: JSX 是如何工作的
你可以看到，組件文件同時(shí)包含 HTML 和 JavaScript 代碼蛉威。React 的秘密武器就是 JSX 語(yǔ)言（“X” 代表 “XML”）日丹。JSX 可能一開(kāi)始看起來(lái)很難對(duì)付，但你很快就能熟悉它蚯嫌。
我們都被教導(dǎo)要保持 HTML 和 JavaScript 的強(qiáng)大分離哲虾。但是當(dāng)放松這個(gè)規(guī)則后，你能在你的前端產(chǎn)品中做一些驚奇的事择示。
比如束凑，因?yàn)槟悻F(xiàn)在擁有 JavaScript 的完整功能，你可以在 HTML 中使用 {...} 插入 JavaScript 片段來(lái)展示當(dāng)前時(shí)間：
class MyComponent extends React.Component {
render() {
return <p>Today is: {new Date()}</p>;
}
}
這同樣意味著你將使用純 JavaScript for栅盲，if 語(yǔ)句或循環(huán)汪诉，而不是某種特定于模板的語(yǔ)法。JavaScript 的三元運(yùn)算符在這里特別方便谈秫。
class MyComponent extends React.Component {
render() {
return <p>Hello {this.props.someVar ? 'World' : 'Kitty'}</p>;
}
}
順帶一提扒寄，作者推薦 ES6 語(yǔ)法，喜歡視頻的可以看 ES6 for Everyone拟烫，喜歡閱讀的可以看 Practical ES6该编。
概念 #3: 屬性 & 狀態(tài) 是如何工作的
可能你會(huì)想要知道上面的 this.props.someVar 變量是怎么來(lái)的。如果你寫(xiě)過(guò)一行 HTML硕淑，你可能熟悉 HTML 的屬性比如<a>標(biāo)簽的 href课竣。在 React 中，屬性表示為 props （properties 的縮寫(xiě)）喜颁。Props 是組件如何溝通的方式稠氮。
class ParentComponent extends React.Component {
render() {
return <ChildComponent message="Hello World"/>;
}
}
class ChildComponent extends React.Component {
render() {
return <p>And then I said, “{this.props.message}”</p>;
}
}
因?yàn)檫@個(gè)，React 的數(shù)據(jù)流是單向的半开。數(shù)據(jù)只能從父組件流向子組件隔披，而不是相反的方式。
盡管有時(shí)候寂拆，一個(gè)組件做出反應(yīng)的數(shù)據(jù)不是來(lái)自于父組件（比如用戶輸入）奢米。這就是** state **怎么來(lái)的。
要理解 props 和 state 的不用之處纠永，一個(gè)很好的比喻就是 Etch-A-Sketch 平板鬓长。與 Etch-A-Sketch 的身體顏色和撥號(hào)位置（props）不同，繪圖（state）本身不是 Etch-A-Sketch 的固有屬性尝江，而僅僅是用戶輸入的臨時(shí)結(jié)果涉波。
注意組件的狀態(tài)同樣可以作為屬性傳遞給它的子組件。你可以理解成一條大河從高山上流下來(lái)，隨著路由啤覆，數(shù)據(jù)層苍日，以及各種組件把它們的數(shù)據(jù)像小溪一樣匯入，組成主要的 app 狀態(tài)窗声。
在組件中相恃，狀態(tài)用 setState 方法來(lái)管理，通常在事件處理器中調(diào)用笨觅。
class MyComponent extends React.Component {
handleClick = (e) => {
this.setState({clicked: true});
}
render() {
return <a href="#" onClick={this.handleClick}>Click me</a>;
}
}
在實(shí)踐中拦耐，React 應(yīng)用中大多數(shù)數(shù)據(jù)是屬性。僅僅當(dāng)你需要接收用戶輸入時(shí)见剩，你需要用狀態(tài)來(lái)處理變化杀糯。
注意到我們使用箭頭函數(shù)來(lái)綁定 handleClick 處理器，你可以在這里學(xué)到更多炮温。
概念 #4: 組件 API 是如何工作的
我們已經(jīng)提到了 render 和 setState火脉，兩者都是組件 API 方法的一部分。另一個(gè)有用的是 constructor柒啤，你可以用來(lái)初始化你的狀態(tài)和綁定方法倦挂。
除了這三個(gè)函數(shù)，React還提供了在組件生命周期（加載前担巩，加載后方援，卸載后等等）內(nèi)的各個(gè)點(diǎn)觸發(fā)的一組回調(diào)。除非你做一些高級(jí)的 React 巫術(shù)涛癌，你將可能從不需要擔(dān)心這些犯戏。
這節(jié)看起來(lái)很短，因?yàn)閷W(xué)習(xí) React 實(shí)際上更多的是精通編程和架構(gòu)的概念而不是學(xué)習(xí)一系列無(wú)聊的 API拳话。它看起來(lái)如此清爽先匪！
概念 #5: 組件類型是如何工作的
我們已經(jīng)見(jiàn)識(shí)過(guò)如何使用類來(lái)定義一個(gè)組件：
class MyComponent extends React.Component {
render() {
return <p>Hello World!<p>;
}
}
并且我們還討論了這些類支持的組件方法。現(xiàn)在忘掉它們弃衍！越來(lái)越多的人將 React 組件寫(xiě)成函數(shù)式組件呀非。
一個(gè)函數(shù)式組件是一個(gè)函數(shù)，它使用 props 對(duì)象作為參數(shù)镜盯，并且返回一串 HTML岸裙。幾乎就像一個(gè)傳統(tǒng)的模板，關(guān)鍵的不同是在你需要的時(shí)候速缆，你仍然可以在其中使用任何 JavaScript 代碼：
const myComponent = props => {
return <p>Hello {props.name}! Today is {new Date()}.</p>
}
使用函數(shù)式組件語(yǔ)法的結(jié)果就是你失去了進(jìn)入我們之前說(shuō)的組件方法的權(quán)利降允。但事實(shí)證明，這是非常好的艺糜，因?yàn)榻^大多數(shù)的組件可能不需要它們剧董。
順便一提幢尚，其中的一個(gè)方法是 setState，這意味著函數(shù)式組件不能有狀態(tài)送滞。因?yàn)檫@個(gè)原因侠草，它們被通常被成為無(wú)狀態(tài)函數(shù)組件辱挥。
由于函數(shù)式組件需要的樣板代碼少得多犁嗅，盡可能使用它們是有意義的。因此晤碘，大多數(shù) React 應(yīng)用程序都包含兩種語(yǔ)法的健康組合褂微。
請(qǐng)注意還有第三個(gè)使用 createClass 函數(shù)的舊語(yǔ)法，任何使用它的人應(yīng)該感到羞愧和被點(diǎn)名批評(píng)园爷，因?yàn)榇竽懙绞褂?18 個(gè)月前的編程模式：
var Greeting = React.createClass({
render: function() {
return <h1>Hello, {this.props.name}</h1>;
}
});
其實(shí)有彩蛋宠蚂，還有第六個(gè)概念，請(qǐng)戳原文：
原文鏈接：React’s Five Fingers of Death. Master these five concepts, then master React.
延伸閱讀：
- JavaScript 數(shù)組和對(duì)象就像書(shū)和報(bào)紙一樣
- 極光開(kāi)源項(xiàng)目：「Aurora UI」童社，一個(gè)通用 IM 聊天 UI 組件求厕，正在努力支持react中。
