React.js 小書 Lesson14 - 實戰分析：評論功能（一）

• 做者：鬍子大哈
• 原文連接： http://huziketang.com/books/react/lesson14
• 轉載請註明出處，保留原文連接和做者信息。

課程到這裏你們已經掌握了 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 中使用樣式有不少種方式，也是一個比較大的話題，有不少種不一樣的方式也有不少不一樣的爭論，這個話題後續有機會會重點講解。

---

由於第三方評論工具備問題，對本章節有任何疑問的朋友能夠移步到 React.js 小書的論壇 發帖，我會回答你們的疑問。