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

Nekron 發(fā)布于2019-08-21 17:33 / 2914人閱讀

摘要：修改請(qǐng)輸入用戶名請(qǐng)輸入評(píng)論內(nèi)容我們?cè)黾恿撕头謩e用于加載和保存評(píng)論列表數(shù)據(jù)?，F(xiàn)在發(fā)布評(píng)論，然后刷新可以看到我們的評(píng)論并不會(huì)像以前一樣消失。非常的不錯(cuò)，持久化評(píng)論的功能也完成了。下一節(jié)中我們將介紹小書實(shí)戰(zhàn)分析評(píng)論功能六。

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

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

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

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

持久化評(píng)論

同樣地，可以通過類似于用戶名持久化的方式對(duì)評(píng)論列表內(nèi)容進(jìn)行持久化，讓用戶發(fā)布的評(píng)論在刷新頁面以后依然可以存在。修改 src/CommentApp.js：

class CommentApp extends Component {
  constructor () {
    super()
    this.state = {
      comments: []
    }
  }

  componentWillMount () {
    this._loadComments()
  }

  _loadComments () {
    let comments = localStorage.getItem("comments")
    if (comments) {
      comments = JSON.parse(comments)
      this.setState({ comments })
    }
  }

  _saveComments (comments) {
    localStorage.setItem("comments", JSON.stringify(comments))
  }

  handleSubmitComment (comment) {
    if (!comment) return
    if (!comment.username) return alert("請(qǐng)輸入用戶名")
    if (!comment.content) return alert("請(qǐng)輸入評(píng)論內(nèi)容")
    const comments = this.state.comments
    comments.push(comment)
    this.setState({ comments })
    this._saveComments(comments)
  }
...

我們?cè)黾恿?_loadComments 和 _saveComments 分別用于加載和保存評(píng)論列表數(shù)據(jù)。用戶每次提交評(píng)論都會(huì)把評(píng)論列表數(shù)據(jù)保存一次，所以我們?cè)?handleSubmitComment 調(diào)用 _saveComments 方法；而在 componentWillMount 中調(diào)用 _loadComments 方法，在組件開始掛載的時(shí)候把評(píng)論列表數(shù)據(jù)加載出來 setState 到 this.state 當(dāng)中，組件就可以渲染從 LocalStorage 從加載出來的評(píng)論列表數(shù)據(jù)了。

現(xiàn)在發(fā)布評(píng)論，然后刷新可以看到我們的評(píng)論并不會(huì)像以前一樣消失。非常的不錯(cuò)，持久化評(píng)論的功能也完成了。

顯示評(píng)論發(fā)布時(shí)間

現(xiàn)在我們給每條評(píng)論都加上發(fā)布的日期，并且在評(píng)論列表項(xiàng)上顯示已經(jīng)發(fā)表了多久，例如“1 秒前”、“30分鐘前”，并且會(huì)每隔 5 秒進(jìn)行更新。修改 src/CommentInput.js 當(dāng)用戶點(diǎn)擊發(fā)布按鈕的時(shí)候，傳出去的評(píng)論數(shù)據(jù)帶上評(píng)論發(fā)布的時(shí)間戳：

...
  handleSubmit () {
    if (this.props.onSubmit) {
      this.props.onSubmit({
        username: this.state.username,
        content: this.state.content,
        createdTime: +new Date()
      })
    }
    this.setState({ content: "" })
  }
...

在評(píng)論列表項(xiàng)上顯示評(píng)論，修改 src/comment.js：

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired
  }

  constructor () {
    super()
    this.state = { timeString: "" }
  }

  componentWillMount () {
    this._updateTimeString()
  }

  _updateTimeString () {
    const comment = this.props.comment
    const duration = (+Date.now() - comment.createdTime) / 1000
    this.setState({
      timeString: duration > 60
        ? `${Math.round(duration / 60)} 分鐘前`
        : `${Math.round(Math.max(duration, 1))} 秒前`
    })
  }

  render () {
    return (
      
        
          {this.props.comment.username} ：
        
        {this.props.comment.content}
        
          {this.state.timeString}
        
      
    )
  }
}

每個(gè) Comment 組件實(shí)例會(huì)保存一個(gè) timeString 狀態(tài)，用于該評(píng)論顯示發(fā)布了多久。_updateTimeString 這個(gè)私有方法會(huì)根據(jù) props.comment 里面的 createdTime 來更新這個(gè) timeString：計(jì)算當(dāng)前時(shí)間和評(píng)論發(fā)布時(shí)間的時(shí)間差，如果已經(jīng)發(fā)布 60 秒以上就顯示分鐘，否則就顯示秒。然后 componentWillMount 會(huì)在組件掛載階段調(diào)用 _updateTimeString 更新一下這個(gè)字符串，render() 方法就把這個(gè)顯示時(shí)間差的字符串渲染到一個(gè) 上。

再看看頁面顯示：

這時(shí)候的時(shí)間是不會(huì)自動(dòng)更新的。除非你手動(dòng)刷新頁面，否則永遠(yuǎn)顯示“1 秒前”。我們可以在 componentWillMount 中啟動(dòng)一個(gè)定時(shí)器，每隔 5 秒調(diào)用一下 _updateTimeString，讓它去通過 setState 更新 timeString：

...
  componentWillMount () {
    this._updateTimeString()
    this._timer = setInterval(
      this._updateTimeString.bind(this),
      5000
    )
  }
...

這樣就可以做到評(píng)論的發(fā)布時(shí)間自動(dòng)刷新了，到這里前 4 個(gè)需求都已經(jīng)完成了。

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

GPU云服務(wù)器云服務(wù)器 jsp評(píng)論功能開發(fā) 五星星評(píng)價(jià)功能 React.js react.js cdn

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89677.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Nekron

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2060·2023-04-26 02:23
芯片短缺重創(chuàng)汽車行業(yè) 福特8月美國(guó)汽車銷量驟降33%

閱讀 1800·2021-09-03 10:30
從css到頁面樣式渲染

閱讀 1373·2019-08-30 15:43
深入理解css之float

閱讀 1204·2019-08-29 16:29
重溫"什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)？響應(yīng)式布局的實(shí)現(xiàn)原理"

閱讀 547·2019-08-29 12:28
微任務(wù)、宏任務(wù)與Event-Loop

閱讀 2347·2019-08-26 12:13
iOS Android中 h5鍵盤遮擋輸入框的問題和解決方案

閱讀 2203·2019-08-26 12:01
Touch UI：基于vue的移動(dòng)端UI框架

閱讀 2425·2019-08-26 11:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

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

相關(guān)文章

**寫一本關(guān)于 React.js 的小書**

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

Nekron

男|高級(jí)講師

TA的文章

tensorflow

芯片短缺重創(chuàng)汽車行業(yè) 福特8月美國(guó)汽車銷量驟降33%

從css到頁面樣式渲染

深入理解css之float

重溫"什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)？響應(yīng)式布局的實(shí)現(xiàn)原理"

微任務(wù)、宏任務(wù)與Event-Loop

iOS Android中 h5鍵盤遮擋輸入框的問題和解決方案

Touch UI：基于vue的移動(dòng)端UI框架

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！