實戰分析：評論功能（一）

 

課程到這裏你們已經掌握了 React.js 的基礎知識和組件的基本寫法了。如今能夠把咱們所學到的內容應用於實戰當中。這裏給你們提供一個實戰的案例：一個評論功能。效果以下：

在線演示地址

接下來會帶你們一塊兒來學習如何分析、編寫這個功能。在這個過程當中會補充一些以前沒有說起的知識點，雖然這些知識點以前沒有單獨拿出來說解，可是這些知識點也很關鍵。

組件劃分

React.js 中一切都是組件，用 React.js 構建的功能其實也就是由各類組件組合而成。因此拿到一個需求之後，咱們要作的第一件事情就是理解需求、分析需求、劃分這個需求由哪些組件構成。

組件的劃分沒有特別明確的標準。劃分組件的目的性是爲了代碼可複用性、可維護性。只要某個部分有可能複用到別的地方，你均可以把它抽離出來當成一個組件；或者把某一部分抽離出來對代碼的組織和管理會帶來幫助，你也能夠堅決果斷地把它抽離出來。

對於上面這個評論功能，能夠粗略地劃分紅如下幾部分：

CommentApp：評論功能的總體用一個叫 CommentApp 的組件包含起來。CommentApp 包含上部和下部兩部分。

CommentInput：上面部分是負責用戶輸入可操做的輸入區域，包括輸入評論的用戶名、評論內容和發佈按鈕，這一部分功能劃分到一個單獨的組件 CommentInput 中。

CommentList：下面部分是評論列表，用一個叫 CommentList 的組件負責列表的展現。

Comment：每一個評論列表項由獨立的組件 Comment 負責顯示，這個組件被 CommentList 所使用。

因此這個評論功能劃分紅四種組件，CommentApp、CommentInput、CommentList、Comment。用組件樹表示：

 

如今就能夠嘗試編寫代碼了。

組件實現

在寫代碼以前，咱們先用 create-react-app 構建一個新的工程目錄。全部的評論功能在這個工程內完成：

create-react-app comment-app

而後在工程目錄下的 src/ 目錄下新建四個文件，每一個文件對應的是上述的四個組件。

src/
  CommentApp.js
  CommentInput.js
  CommentList.js
  Comment.js
  ...

你能夠注意到，這裏的文件名的開頭是大寫字母。咱們遵循一個原則：若是一個文件導出的是一個類，那麼這個文件名就用大寫開頭。四個組件類文件導出都是類，因此都是大寫字母開頭。

咱們先鋪墊一些基礎代碼，讓組件之間的關係清晰起來。遵循「自頂而下，逐步求精」的原則，咱們從組件的頂層開始，再一步步往下構建組件樹。先修改 CommentApp.js 以下：

import React, { Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'

class CommentApp extends Component {
  render() {
    return (
      <div>
        <CommentInput />
        <CommentList />
      </div>
    )
  }
}

export default CommentApp

CommentApp 如今暫時還很簡單，文件頂部引入了 CommentInput 和 CommentList 。而後按照上面的需求，應用在了 CommentApp 返回的 JSX 結構中，上面是用戶輸入區域，下面是評論列表。

如今來修改 CommentInput.js 中的內容：

import React, { Component } from 'react'

class CommentInput extends Component {
  render() {
    return (
      <div>CommentInput</div>
    )
  }
}

export default CommentInput

這裏暫時讓它只簡單返回 <div> 結構，一樣地修改 CommentList.js ：

import React, { Component } from 'react'

class CommentList extends Component {
  render() {
    return (
      <div>CommentList</div>
    )
  }
}

export default CommentList

如今能夠把這個簡單的結構渲染到頁面上看看什麼效果，修改 src/index.js：

import React from 'react'
import ReactDOM from 'react-dom'
import CommentApp from './CommentApp'
import './index.css'

ReactDOM.render(
  <CommentApp />,
  document.getElementById('root')
)

而後進入工程目錄啓動工程：

npm run start

在瀏覽器中能夠看到，基本的結構已經渲染到了頁面上了：

添加樣式

如今想讓這個結構在瀏覽器中居中顯示，咱們就要給 CommentApp 裏面的 <div> 添加樣式。修改 CommentApp 中的render 方法，給它添加一個 wrapper 類名：

...
class CommentApp extends Component {
  render() {
    return (
      <div className='wrapper'>
        <CommentInput />
        <CommentList />
      </div>
    )
  }
}
...

而後在 index.css 文件中添加樣式：

.wrapper {
  width: 500px;
  margin: 10px auto;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

在瀏覽器中能夠看到樣式生效了：

評論功能案例的全部樣式都是經過這種方式進行添加。因爲咱們專一點在於 React.js，本案例後續不會在樣式上過於糾纏。這裏寫好了一個樣式文件（index.css）提供給你們，能夠複製到 index.css 當中。後續只須要在元素上加上類名就能夠了。

如何在 React.js 中使用樣式有不少種方式，也是一個比較大的話題，有不少種不一樣的方式也有不少不一樣的爭論，這個話題後續有機會會重點講解。

下一節：實戰分析：評論功能（二）

上一節：渲染列表數據