React.js 小書 Lesson14 - 實(shí)戰(zhàn)分析：評(píng)論功能（一）
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
課程到這里大家已經(jīng)掌握了 React.js 的基礎(chǔ)知識(shí)和組件的基本寫法了?，F(xiàn)在可以把我們所學(xué)到的內(nèi)容應(yīng)用于實(shí)戰(zhàn)當(dāng)中。這里給大家提供一個(gè)實(shí)戰(zhàn)的案例：一個(gè)評(píng)論功能。效果如下：
[圖片上傳失敗...(image-918e93-1510226547139)]
接下來會(huì)帶大家一起來學(xué)習(xí)如何分析、編寫這個(gè)功能。在這個(gè)過程中會(huì)補(bǔ)充一些之前沒有提及的知識(shí)點(diǎn)，雖然這些知識(shí)點(diǎn)之前沒有單獨(dú)拿出來講解，但是這些知識(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)論功能，可以粗略地劃分成以下幾部分：
[圖片上傳失敗...(image-a23325-1510226547139)]
CommentApp：評(píng)論功能的整體用一個(gè)叫 CommentApp 的組件包含起來。CommentApp 包含上部和下部?jī)刹糠帧?/p>
CommentInput：上面部分是負(fù)責(zé)用戶輸入可操作的輸入?yún)^(qū)域，包括輸入評(píng)論的用戶名、評(píng)論內(nèi)容和發(fā)布按鈕，這一部分功能劃分到一個(gè)單獨(dú)的組件 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。用組件樹表示：
[圖片上傳失敗...(image-e2bd1d-1510226547139)]
現(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 (
<div>
<CommentInput />
<CommentList />
</div>
)
}
}
export default CommentApp
CommentApp 現(xiàn)在暫時(shí)還很簡(jiǎn)單，文件頂部引入了 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 (
<div>CommentInput</div>
)
}
}
export default CommentInput
這里暫時(shí)讓它只簡(jiǎn)單返回 <div> 結(jié)構(gòu)，同樣地修改 CommentList.js ：
import React, { Component } from 'react'
class CommentList extends Component {
render() {
return (
<div>CommentList</div>
)
}
}
export default CommentList
現(xiàn)在可以把這個(gè)簡(jiǎn)單的結(jié)構(gòu)渲染到頁面上看看什么效果，修改 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')
)
然后進(jìn)入工程目錄啟動(dòng)工程：
npm run start
在瀏覽器中可以看到，基本的結(jié)構(gòu)已經(jīng)渲染到了頁面上了：
[圖片上傳失敗...(image-7a077b-1510226547139)]
添加樣式
現(xiàn)在想讓這個(gè)結(jié)構(gòu)在瀏覽器中居中顯示，我們就要給 CommentApp 里面的 <div> 添加樣式。修改 CommentApp 中的render 方法，給它添加一個(gè) 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;
}
在瀏覽器中可以看到樣式生效了：
[圖片上傳失敗...(image-bc5d03-1510226547139)]
評(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)論功能（二）》。
