&emsp;&emsp;組件（Component）由若干個React元素組成，包含屬性、狀態和生命周期等部分，滿足獨立、可復用、高內聚和低耦合等設計原則，每個React應用程序都是由一個個的組件搭建而成，即組成React應用程序的最小單元正是組件。 ## 一、構建 &emsp;&emsp;目前推崇的構建組件的方式總共有兩種：類和函數，而用React.createClass()構建組件的方式已經過時，本節也不會對其做講解。 **1）類組件** &emsp;&emsp;通過ES6新增的類構建而成的組件必須繼承自React.Component，并且需要定義render()方法。此方法用于組件的輸出，即組件的渲染內容，如下代碼所示。注意，render()是一個純函數，不會改變組件的狀態，并且其返回值有多種，包括React元素、布爾值、數組等。 ~~~js class Btn extends React.Component { render() { return <button>提交</button>; } } ~~~ **2）函數組件** &emsp;&emsp;使用函數構建的組件只關注用戶界面的展示，既無狀態，也無生命周期。其功能相當于類組件的render()方法，但能接收一個屬性對象（props），下面是一個簡單的函數組件。 ~~~js function Btn(props) { return <button>{props.text}</button>; } ~~~ &emsp;&emsp;與類組件不同，函數組件在調用時不會創建新實例。 ## 二、state（組件狀態） &emsp;&emsp;組件中的state用于記錄其內部狀態，這類有狀態組件會隨著state的變化修改其最終的呈現。 **1）初始化** &emsp;&emsp;在組件的構造函數constructor()中可以像下面這樣，通過this.state初始化組件的內部狀態，其中this.state必須是一個對象。 ~~~js class Btn extends React.Component { constructor() { super(); this.state = { text: "提交" }; } render() { return <button>{this.state.text}</button>; } } ~~~ &emsp;&emsp;注意，在初始化之前要先調用super()，因為ES6對兩個類的this的初始化順序做了規定，先父類，再子類，所以super()方法要在使用this之前調用。 &emsp;&emsp;如果要讀取this.state中的數據，那么可以像上面的代碼那樣通過成員訪問運算符得到。但如果要更新this.state中的數據，那么就得用setState()方法，而不是用運算符。 **2）setState()** &emsp;&emsp;此方法能接收2個參數，第一個是函數或對象，第二個是可選的回調函數，會在更新之后觸發。下面用示例講解第一個參數的兩種情況（省略了構造函數以及初始化的代碼），當它是函數時，能接收2個參數，第一個是當前的state，第二個是組件的props（將在下一節講解），此處函數的功能是交替變換按鈕的文本。 ~~~js class Btn extends React.Component { change() { this.setState((state, props) => { return { text: state.text == "點擊" ? "提交" : "點擊" }; }); } render() { return <button onClick={this.change.bind(this)}>{this.state.text}</button>; } } ~~~ &emsp;&emsp;當setState()方法的第一個參數是對象時，可以將要更新的數據傳遞進來，就像下面這樣（省略了render()方法）。 ~~~js class Btn extends React.Component { change() { this.setState({ text: "點擊" }); } } ~~~ &emsp;&emsp;setState()是一個異步方法，React會將多個setState()方法合并成一個調用，也就是說，在調用setState()后，不能馬上反映出狀態的變化。例如this.state.text的值原先是“提交”，在像下面這樣更新狀態后，打印出的值仍然是“提交”。 ~~~js this.setState({text: "點擊"}); console.log(this.state.text); //"提交" ~~~ &emsp;&emsp;setState()方法在將新數據合并到當前狀態之后，就會自動調用render()方法，驅動組件重新渲染。由此可知，在render()方法中不允許調用setState()方法，以免造成死循環。 &emsp;&emsp;在后面的生命周期一節中會講解組件在各個階段可用的回調函數。其中有些回調函數得在render()方法被執行后再被調用，因此在它們內部通過this.state得到的將是更新后的內部狀態。 ## 三、props（組件屬性） &emsp;&emsp;props（properties的縮寫）能接收外部傳遞給組件的數據，當組件作為React元素使用時，props就是一個由元素屬性所組成的對象。以Btn組件為例，它的props的結構如下所示，其中children是一個特殊屬性，后續將會單獨講解。 ~~~js <Btn name="strick" digit={0}>提交</Btn> props = { name: "strick", digit: 0, children: "提交" } ~~~ **1）讀取** &emsp;&emsp;每個組件都會有一個構造函數，而它的參數正是props。由于React組件相當于一個純函數，因此props不能被修改，它的屬性都是只讀的，像下面這樣賦值勢必會引起組件的副作用，因而React會馬上終止程序，直接拋出錯誤。 ~~~js class Btn extends React.Component { constructor(props) { super(props); props.name = "freedom"; //錯誤 } } ~~~ &emsp;&emsp;因為有此限制，所以若要修改props中的某個屬性，通常會先將它賦給state，再通過state更新數據，如下所示。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.state = { name: props.name }; } } ~~~ &emsp;&emsp;在構造函數之外，可通過this.props訪問到傳遞進來的數據。 **2）defaultProps** &emsp;&emsp;組件的靜態屬性defaultProps可為props指定默認值，例如為組件設置默認的name屬性，當props.name缺省時，就能用該值，如下所示。 ~~~js class Btn extends React.Component { constructor(props) { super(props); } render() { return <button>{this.props.name}</button>; } } Btn.defaultProps = { name: "freedom" }; ~~~ **3）children** &emsp;&emsp;每個props都會包含一個特殊的屬性：children，表示組件的內容，即所包裹的子組件。例如下面這個Btn組件，其props.children的值為“搜索”。 ~~~js <Btn>搜索</Btn> ~~~ &emsp;&emsp;children可以是null、字符串或對象等數據類型，并且當組件的內容是多個子組件時，children還能自動變成一個數組。 &emsp;&emsp;官方通過React.Children給出了專門處理children的輔助方法，例如用于遍歷的forEach()，如下代碼所示，其余方法可參考表1。 ~~~js React.Children.forEach(props.children, child => { console.log(child); }); ~~~ :-:  :-: 表1 輔助方法 &emsp;&emsp;當children是數組時，React.Children中的map()和forEach()兩個方法與數組中的功能類似，并且count()方法的返回值與數組的length屬性相同。但當children是其它類型時，用React.Children中的輔助方法會比較保險，例如children為一個子組件“strick”，調用count()方法得到的值為1，而調用length屬性得到的值為6，這與當前子組件的數量不符。 **4）校驗屬性** &emsp;&emsp;自React v15.5起，官方棄用了React.PropTypes，改用prop-types庫。此庫能校驗props中屬性的類型，例如將Btn組件的age屬性限制為數字，可以像下面這樣設置。 ~~~js Btn.propTypes = { age: PropTypes.number } ~~~ &emsp;&emsp;在引入該庫后，就會有一個全局對象PropTypes。除了數字類型之外，PropTypes還提供了其它類型的校驗，具體對應關系可參考表2。 :-:  :-: 表2 對應關系 &emsp;&emsp;當組件的屬性是對象或數組時，PropTypes能校驗其成員的類型，例如要求數組的成員都得是字符串、對象的某個屬性必須是布爾值，可以像下面這樣操作。 ~~~js Btn.propTypes = { names: PropTypes.arrayOf(PropTypes.string), person: PropTypes.shape({ isMan: PropTypes.bool }) } ~~~ &emsp;&emsp;PropTypes還能在其任意屬性后加isRequired標記，例如PropTypes.number.isRequired表示必須傳數字類型的屬性，并且不能缺省。下面示例中的school屬性，不限制類型，只要有值就行。 ~~~js Btn.propTypes = { school: PropTypes.any.isRequired } ~~~ &emsp;&emsp;此節只列出了prop-types庫中的部分功能，其余功能可參考官方文檔。 **5）數據流** &emsp;&emsp;在React中，組件之間的數據是自頂向下單向流動，即父組件通過props將數據傳遞給子組件（如圖3所示），以此實現它們之間的對話和聯系。 :-:  :-: 圖3 單向數據流 &emsp;&emsp;舉個簡單的例子，有兩個組件Container和Btn，其中Container是父組件，Btn是子組件，Container組件會將它的text屬性傳遞給Btn組件，以此完成數據的流動。為了便于觀察，省略了兩個組件的構造函數，具體如下所示。 ~~~js class Btn extends React.Component { render() { return <button>{this.props.text}</button>; } } class Container extends React.Component { render() { return <Btn text="提交" />; } } ~~~ ## 四、列表和Keys &emsp;&emsp;在組件中渲染列表數據是非常常見的需要，例如輸出多個按鈕，如下代碼所示。 ~~~js class Btns extends React.Component { constructor(props) { super(props); } render() { const list = this.props.names.map(value => <button>{value}</button>); return <div>{list}</div>; } } ReactDOM.render( <Btns names={[1,2,3]}>按鈕列表</Btns>, document.getElementById("container") ); ~~~ &emsp;&emsp;在上面的render()方法中，先通過map()方法遍歷傳遞進來的names屬性，再為這個數組的每個元素加上標簽，最后得到元素列表list后，將其作為返回值輸出。不過，此時會收到一個要求為列表中的子元素添加key屬性的警告，如圖4所示。 :-:  圖4 key屬性的警告 &emsp;&emsp;在React中，Keys會作為元素的身份標識，能夠幫助React識別出發生變化的元素，從而只渲染這些元素。每個元素的key屬性在當前列表中要保持唯一性，即在其兄弟元素之間要獨一無二，如下代碼所示（省略了組件的構造函數）。 ~~~js class Btns extends React.Component { render() { const list1 = this.props.names.map(value => <button key={value}>{value}</button>); const list2 = this.props.names.map(value => <button key={value}>{value}</button>); return ( <div> <section>{list1}</section> <section>{list2}</section> </div> ); } } ~~~ &emsp;&emsp;在上面的render()方法中，有兩個元素列表：list1和list2，雖然它們包含相同key屬性的元素，但分別被嵌到了兩個元素中，從而將兩者隔離，達成了key屬性唯一的目標。由此可知，key屬性不是全局唯一的。 &emsp;&emsp;注意，一般不建議用數組的索引作為key屬性的值，因為一旦數組中元素的位置發生變化，其索引也會跟著改變，不利于渲染優化。 &emsp;&emsp;關于在何時設置key屬性，有個簡單的規則可以參考，那就是當元素位于map()方法內時，需要為該元素添加key屬性。 ***** > 原文出處： [博客園-React躬行記](https://www.cnblogs.com/strick/category/1455720.html) [知乎專欄-React躬行記](https://zhuanlan.zhihu.com/pwreact) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。