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

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

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

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

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

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

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

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

在線演示地址

接下來會帶大家一起來學習如何分析、編寫這個功能。在這個過程中會補充一些之前沒有提及的知識點，雖然這些知識點之前沒有多帶帶拿出來講解，但是這些知識點也很關鍵。

組件劃分

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

組件的劃分沒有特別明確的標準。劃分組件的目的性是為了代碼可復用性、可維護性。只要某個部分有可能復用到別的地方，你都可以把它抽離出來當成一個組件；或者把某一部分抽離出來對代碼的組織和管理會帶來幫助，你也可以毫不猶豫地把它抽離出來。

對于上面這個評論功能，可以粗略地劃分成以下幾部分：

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

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

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

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

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

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

組件實現(xiàn)

在寫代碼之前，我們先用 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 (
      
        
        
      
    )
  }
}

export default CommentApp

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

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

import React, { Component } from "react"

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

export default CommentInput

這里暫時讓它只簡單返回

結構，同樣地修改 CommentList.js ：

import React, { Component } from "react"

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

export default CommentList

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

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

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

然后進入工程目錄啟動工程：

npm run start

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

添加樣式

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

添加樣式。修改 CommentApp 中的render 方法，給它添加一個 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;
}

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

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

如何在 React.js 中使用樣式有很多種方式，也是一個比較大的話題，有很多種不同的方式也有很多不同的爭論，這個話題后續(xù)有機會會重點講解。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/89690.html

寫一本關于 React.js 的小書

摘要：因為工作中一直在使用，也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來，做成一本開源免費專業(yè)簡單的入門級別的小書，提供給社區(qū)。本書的后續(xù)可能會做成視頻版本，敬請期待。本作品采用署名禁止演繹國際許可協(xié)議進行許可 React.js 小書本文作者：胡子大哈本文原文：React.js 小書轉載請注明出處，保留原文鏈接以及作者信息在線閱讀：http://huzi...

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson26 - 實戰(zhàn)分析：評論功能（五）

摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數(shù)據(jù)?，F(xiàn)在發(fā)布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能六。 React.js 小書 Lesson26 - 實戰(zhàn)分析：評論功能（五）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/...

Nekron 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson16 - 實戰(zhàn)分析：評論功能（三）

摘要：但是給傳遞的評論數(shù)據(jù)并沒有傳遞給，所以現(xiàn)在發(fā)表評論時沒有反應的。包括實現(xiàn)功能之前先理解分析需求，劃分組件。到此為止，小書的第一階段已經結束，你可以利用這些知識點來構建簡單的功能模塊了。 React.js 小書 Lesson16 - 實戰(zhàn)分析：評論功能（三）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson16 轉載請注明出處...

Gilbertat 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson25 - 實戰(zhàn)分析：評論功能（四）

摘要：接下來是實戰(zhàn)環(huán)節(jié)，我們會繼續(xù)上一階段的例子，把評論功能做得更加復雜一點。把已經發(fā)布的評論持久化，存放到瀏覽器的中。評論顯示發(fā)布日期，如秒前，分鐘前，并且會每隔秒更新發(fā)布日期。事件監(jiān)聽方法，。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能五。 React.js 小書 Lesson25 - 實戰(zhàn)分析：評論功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 評論0 收藏0
React.js 小書 Lesson15 - 實戰(zhàn)分析：評論功能（二）

摘要：例如，上面設置了的為，在中被初始化為空字符串。如何向傳遞的數(shù)據(jù)父組件只需要通過給子組件傳入一個回調函數(shù)。當用戶點擊發(fā)布按鈕的時候，調用中的回調函數(shù)并且將傳入該函數(shù)即可。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能三。 React.js 小書 Lesson15 - 實戰(zhàn)分析：評論功能（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

siberiawolf 2019-08-21 17:34 評論0 收藏0