React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一）

QiuyueZhong 發(fā)布于2019-08-21 17:34 / 2246人閱讀

摘要：對(duì)于上面這個(gè)評(píng)論功能，可以粗略地劃分成以下幾部分評(píng)論功能的整體用一個(gè)叫的組件包含起來。每個(gè)評(píng)論列表項(xiàng)由獨(dú)立的組件負(fù)責(zé)顯示，這個(gè)組件被所使用。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能二。

React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一）

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

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

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

課程到這里大家已經(jīng)掌握了 React.js 的基礎(chǔ)知識(shí)和組件的基本寫法了。現(xiàn)在可以把我們所學(xué)到的內(nèi)容應(yīng)用于實(shí)戰(zhàn)當(dāng)中。這里給大家提供一個(gè)實(shí)戰(zhàn)的案例：一個(gè)評(píng)論功能。效果如下：

在線演示地址

接下來會(huì)帶大家一起來學(xué)習(xí)如何分析、編寫這個(gè)功能。在這個(gè)過程中會(huì)補(bǔ)充一些之前沒有提及的知識(shí)點(diǎn)，雖然這些知識(shí)點(diǎn)之前沒有多帶帶拿出來講解，但是這些知識(shí)點(diǎn)也很關(guān)鍵。

組件劃分

React.js 中一切都是組件，用 React.js 構(gòu)建的功能其實(shí)也就是由各種組件組合而成。所以拿到一個(gè)需求以后，我們要做的第一件事情就是理解需求、分析需求、劃分這個(gè)需求由哪些組件構(gòu)成。

組件的劃分沒有特別明確的標(biāo)準(zhǔn)。劃分組件的目的性是為了代碼可復(fù)用性、可維護(hù)性。只要某個(gè)部分有可能復(fù)用到別的地方，你都可以把它抽離出來當(dāng)成一個(gè)組件；或者把某一部分抽離出來對(duì)代碼的組織和管理會(huì)帶來幫助，你也可以毫不猶豫地把它抽離出來。

對(duì)于上面這個(gè)評(píng)論功能，可以粗略地劃分成以下幾部分：

CommentApp：評(píng)論功能的整體用一個(gè)叫 CommentApp 的組件包含起來。CommentApp 包含上部和下部兩部分。

CommentInput：上面部分是負(fù)責(zé)用戶輸入可操作的輸入?yún)^(qū)域，包括輸入評(píng)論的用戶名、評(píng)論內(nèi)容和發(fā)布按鈕，這一部分功能劃分到一個(gè)多帶帶的組件 CommentInput 中。

CommentList：下面部分是評(píng)論列表，用一個(gè)叫 CommentList 的組件負(fù)責(zé)列表的展示。

Comment：每個(gè)評(píng)論列表項(xiàng)由獨(dú)立的組件 Comment 負(fù)責(zé)顯示，這個(gè)組件被 CommentList 所使用。

所以這個(gè)評(píng)論功能劃分成四種組件，CommentApp、CommentInput、CommentList、Comment。用組件樹表示：

現(xiàn)在就可以嘗試編寫代碼了。

組件實(shí)現(xiàn)

在寫代碼之前，我們先用 create-react-app 構(gòu)建一個(gè)新的工程目錄。所有的評(píng)論功能在這個(gè)工程內(nèi)完成：

create-react-app comment-app

然后在工程目錄下的 src/ 目錄下新建四個(gè)文件，每個(gè)文件對(duì)應(yīng)的是上述的四個(gè)組件。

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

你可以注意到，這里的文件名的開頭是大寫字母。我們遵循一個(gè)原則：如果一個(gè)文件導(dǎo)出的是一個(gè)類，那么這個(gè)文件名就用大寫開頭。四個(gè)組件類文件導(dǎo)出都是類，所以都是大寫字母開頭。

我們先鋪墊一些基礎(chǔ)代碼，讓組件之間的關(guān)系清晰起來。遵循“自頂而下，逐步求精”的原則，我們從組件的頂層開始，再一步步往下構(gòu)建組件樹。先修改 CommentApp.js 如下：

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

class CommentApp extends Component {
  render() {
    return (
      
        
        
      
    )
  }
}

export default CommentApp

CommentApp 現(xiàn)在暫時(shí)還很簡單，文件頂部引入了 CommentInput 和 CommentList 。然后按照上面的需求，應(yīng)用在了 CommentApp 返回的 JSX 結(jié)構(gòu)中，上面是用戶輸入?yún)^(qū)域，下面是評(píng)論列表。

現(xiàn)在來修改 CommentInput.js 中的內(nèi)容：

import React, { Component } from "react"

class CommentInput extends Component {
  render() {
    return (
      CommentInput
    )
  }
}

export default CommentInput

這里暫時(shí)讓它只簡單返回

結(jié)構(gòu)，同樣地修改 CommentList.js ：

import React, { Component } from "react"

class CommentList extends Component {
  render() {
    return (
      CommentList
    )
  }
}

export default CommentList

現(xiàn)在可以把這個(gè)簡單的結(jié)構(gòu)渲染到頁面上看看什么效果，修改 src/index.js：

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

ReactDOM.render(
  ,
  document.getElementById("root")
)

然后進(jìn)入工程目錄啟動(dòng)工程：

npm run start

在瀏覽器中可以看到，基本的結(jié)構(gòu)已經(jīng)渲染到了頁面上了：

添加樣式

現(xiàn)在想讓這個(gè)結(jié)構(gòu)在瀏覽器中居中顯示，我們就要給 CommentApp 里面的

添加樣式。修改 CommentApp 中的render 方法，給它添加一個(gè) wrapper 類名：

...
class CommentApp extends Component {
  render() {
    return (
      
        
        
      
    )
  }
}
...

然后在 index.css 文件中添加樣式：

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

在瀏覽器中可以看到樣式生效了：

評(píng)論功能案例的所有樣式都是通過這種方式進(jìn)行添加。由于我們專注點(diǎn)在于 React.js，本案例后續(xù)不會(huì)在樣式上過于糾纏。這里寫好了一個(gè)樣式文件（index.css ）提供給大家，可以復(fù)制到 index.css 當(dāng)中。后續(xù)只需要在元素上加上類名就可以了。

如何在 React.js 中使用樣式有很多種方式，也是一個(gè)比較大的話題，有很多種不同的方式也有很多不同的爭(zhēng)論，這個(gè)話題后續(xù)有機(jī)會(huì)會(huì)重點(diǎn)講解。

下一節(jié)中我們將介紹《React.js 小書 Lesson15 - 實(shí)戰(zhàn)分析：評(píng)論功能（二）》。