React.js 小書 Lesson8 - 組件的組合、嵌套和組件樹

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson8

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

繼續(xù)拓展前面的例子，現(xiàn)在我們已經(jīng)有了 Header 組件了。假設(shè)我們現(xiàn)在構(gòu)建一個新的組件叫 Title，它專門負責(zé)顯示標題。你可以在 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> 會顯示在相應(yīng)的位置上。如果現(xiàn)在我們在 Header 里面使用三個 <Title /> ，那么就會有三個 <h1 /> 顯示在頁面上。

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

這樣可復(fù)用性非常強，我們可以把組件的內(nèi)容封裝好，然后靈活在使用在任何組件內(nèi)。另外這里要注意的是，自定義的組件都必須要用大寫字母開頭，普通的 HTML 標簽都用小寫字母開頭。

現(xiàn)在讓組件多起來。我們來構(gòu)建額外的組件來構(gòu)建頁面，假設(shè)頁面是由 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 標簽一樣使用就可以。這樣的組合嵌套，最后構(gòu)成一個所謂的組件樹，就正如上面的例子那樣，Index 用了 Header、Main、Footer，Header 又使用了 Title 。這樣用這樣的樹狀結(jié)構(gòu)表示它們之間的關(guān)系：

[圖片上傳失敗...(image-14acdf-1510226027697)]

這里的結(jié)構(gòu)還是比較簡單，因為我們的頁面結(jié)構(gòu)并不復(fù)雜。當頁面結(jié)構(gòu)復(fù)雜起來，有許多不同的組件嵌套組合的話，組件樹會相當?shù)膹?fù)雜和龐大。理解組件樹的概念對后面理解數(shù)據(jù)是如何在組件樹內(nèi)自上往下流動過程很重要。

下一節(jié)中我們將介紹《React.js 小書 Lesson9 - 事件監(jiān)聽》。