React 組件

可以這么說，一個(gè) React 應(yīng)用就是構(gòu)建在 React 組件之上的。

組件有兩個(gè)核心概念：

• props
• state

一個(gè)組件就是通過這兩個(gè)屬性的值在 render 方法里面生成這個(gè)組件對(duì)應(yīng)的 HTML 結(jié)構(gòu)。

注意：組件生成的 HTML 結(jié)構(gòu)只能有一個(gè)單一的根節(jié)點(diǎn)。

props

前面也提到很多次了，props 就是組件的屬性，由外部通過 JSX 屬性傳入設(shè)置，一旦初始設(shè)置完成，就可以認(rèn)為 this.props 是不可更改的，所以不要輕易更改設(shè)置 this.props 里面的值（雖然對(duì)于一個(gè) JS 對(duì)象你可以做任何事）。

state

state 是組件的當(dāng)前狀態(tài)，可以把組件簡單看成一個(gè)“狀態(tài)機(jī)”，根據(jù)狀態(tài) state 呈現(xiàn)不同的 UI 展示。

一旦狀態(tài)（數(shù)據(jù)）更改，組件就會(huì)自動(dòng)調(diào)用 render 重新渲染 UI，這個(gè)更改的動(dòng)作會(huì)通過 this.setState 方法來觸發(fā)。

劃分狀態(tài)數(shù)據(jù)

一條原則：讓組件盡可能地少狀態(tài)。

這樣組件邏輯就越容易維護(hù)。

什么樣的數(shù)據(jù)屬性可以當(dāng)作狀態(tài)？

當(dāng)更改這個(gè)狀態(tài)（數(shù)據(jù)）需要更新組件 UI 的就可以認(rèn)為是 state，下面這些可以認(rèn)為不是狀態(tài)：

• 可計(jì)算的數(shù)據(jù)：比如一個(gè)數(shù)組的長度
• 和 props 重復(fù)的數(shù)據(jù)：除非這個(gè)數(shù)據(jù)是要做變更的

最后回過頭來反復(fù)看幾遍 Thinking in React，相信會(huì)對(duì)組件有更深刻的認(rèn)識(shí)。

無狀態(tài)組件

你也可以用純粹的函數(shù)來定義無狀態(tài)的組件(stateless function)，這種組件沒有狀態(tài)，沒有生命周期，只是簡單的接受 props 渲染生成 DOM 結(jié)構(gòu)。無狀態(tài)組件非常簡單，開銷很低，如果可能的話盡量使用無狀態(tài)組件。比如使用箭頭函數(shù)定義：

const HelloMessage = (props) => <div> Hello {props.name}</div>;
render(<HelloMessage name="John" />, mountNode);

因?yàn)闊o狀態(tài)組件只是函數(shù)，所以它沒有實(shí)例返回，這點(diǎn)在想用 refs 獲取無狀態(tài)組件的時(shí)候要注意，參見DOM 操作。