React.js 小書 Lesson8 - 組件的組合培己、嵌套和組件樹
轉載請注明出處炕横，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
繼續(xù)拓展前面的例子，現(xiàn)在我們已經(jīng)有了 Header 組件了老厌。假設我們現(xiàn)在構建一個新的組件叫 Title瘟则，它專門負責顯示標題。你可以在 Header 里面使用 Title組件：
class Title extends Component {
render () {
return (
<h1>React 小書</h1>
)
}
}
class Header extends Component {
render () {
return (
<div>
<Title />
</div>
)
}
}
我們可以直接在 Header 標簽里面直接使用 Title 標簽枝秤。就像是一個普通的標簽一樣壹粟。React.js 會在 <Title /> 所在的地方把 Title 組件的 render 方法表示的 JSX 內(nèi)容渲染出來，也就是說 <h1>React 小書</h1> 會顯示在相應的位置上宿百。如果現(xiàn)在我們在 Header 里面使用三個 <Title /> ，那么就會有三個 <h1 /> 顯示在頁面上洪添。
<div>
<Title />
<Title />
<Title />
</div>
這樣可復用性非常強垦页，我們可以把組件的內(nèi)容封裝好，然后靈活在使用在任何組件內(nèi)干奢。另外這里要注意的是痊焊，自定義的組件都必須要用大寫字母開頭，普通的 HTML 標簽都用小寫字母開頭忿峻。
現(xiàn)在讓組件多起來薄啥。我們來構建額外的組件來構建頁面，假設頁面是由 Header 逛尚、Main 垄惧、Footer 幾個部分組成，由一個 Index 把它們組合起來绰寞。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Title extends Component {
render () {
return (
<h1>React 小書</h1>
)
}
}
class Header extends Component {
render () {
return (
<div>
<Title />
<h2>This is Header</h2>
</div>
)
}
}
class Main extends Component {
render () {
return (
<div>
<h2>This is main content</h2>
</div>
)
}
}
class Footer extends Component {
render () {
return (
<div>
<h2>This is footer</h2>
</div>
)
}
}
class Index extends Component {
render () {
return (
<div>
<Header />
<Main />
<Footer />
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
最后頁面會顯示內(nèi)容：
[圖片上傳失敗...(image-14d417-1510226027697)]
組件可以和組件組合在一起到逊，組件內(nèi)部可以使用別的組件。就像普通的 HTML 標簽一樣使用就可以滤钱。這樣的組合嵌套觉壶，最后構成一個所謂的組件樹，就正如上面的例子那樣件缸，Index 用了 Header铜靶、Main、Footer他炊，Header 又使用了 Title 争剿。這樣用這樣的樹狀結構表示它們之間的關系：
[圖片上傳失敗...(image-14acdf-1510226027697)]
這里的結構還是比較簡單，因為我們的頁面結構并不復雜痊末。當頁面結構復雜起來秒梅，有許多不同的組件嵌套組合的話，組件樹會相當?shù)膹碗s和龐大舌胶。理解組件樹的概念對后面理解數(shù)據(jù)是如何在組件樹內(nèi)自上往下流動過程很重要捆蜀。
下一節(jié)中我們將介紹《React.js 小書 Lesson9 - 事件監(jiān)聽》。
