組件的組合、嵌套和組件樹

繼續拓展前面的例子，如今咱們已經有了 Header 組件了。假設咱們如今構建一個新的組件叫 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 內容渲染出來，也就是說 <h1>React 小書</h1> 會顯示在相應的位置上。若是如今咱們在 Header 裏面使用三個 <Title /> ，那麼就會有三個 <h1 /> 顯示在頁面上。

<div>
  <Title />
  <Title />
  <Title />
</div>

這樣可複用性很是強，咱們能夠把組件的內容封裝好，而後靈活在使用在任何組件內。另外這裏要注意的是，自定義的組件都必需要用大寫字母開頭，普通的 HTML 標籤都用小寫字母開頭。

如今讓組件多起來。咱們來構建額外的組件來構建頁面，假設頁面是由 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')
)

最後頁面會顯示內容：

組件能夠和組件組合在一塊兒，組件內部能夠使用別的組件。就像普通的 HTML 標籤同樣使用就能夠。這樣的組合嵌套，最後構成一個所謂的組件樹，就正如上面的例子那樣，Index 用了 Header、Main、Footer，Header 又使用了 Title 。這樣用這樣的樹狀結構表示它們之間的關係：

 

這裏的結構仍是比較簡單，由於咱們的頁面結構並不複雜。當頁面結構複雜起來，有許多不一樣的組件嵌套組合的話，組件樹會至關的複雜和龐大。理解組件樹的概念對後面理解數據是如何在組件樹內自上往下流動過程很重要。

下一節：事件監聽

上一節：組件的 render 方法