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

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

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

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

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

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

在線(xiàn)閱讀：http://huziketang.com/books/react

持久化評(píng)論

同樣地，可以通過(guò)類(lèi)似于用戶(hù)名持久化的方式對(duì)評(píng)論列表內(nèi)容進(jìn)行持久化，讓用戶(hù)發(fā)布的評(píng)論在刷新頁(yè)面以后依然可以存在。修改 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)輸入用戶(hù)名")
    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ù)。用戶(hù)每次提交評(píng)論都會(huì)把評(píng)論列表數(shù)據(jù)保存一次，所以我們?cè)?handleSubmitComment 調(diào)用 _saveComments 方法；而在 componentWillMount 中調(diào)用 _loadComments 方法，在組件開(kāi)始掛載的時(shí)候把評(píng)論列表數(shù)據(jù)加載出來(lái) setState 到 this.state 當(dāng)中，組件就可以渲染從 LocalStorage 從加載出來(lái)的評(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)用戶(hù)點(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 來(lái)更新這個(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è) 上。

再看看頁(yè)面顯示：

這時(shí)候的時(shí)間是不會(huì)自動(dòng)更新的。除非你手動(dòng)刷新頁(yè)面，否則永遠(yuǎn)顯示“1 秒前”。我們可以在 componentWillMount 中啟動(dòng)一個(gè)定時(shí)器，每隔 5 秒調(diào)用一下 _updateTimeString，讓它去通過(guò) 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 小書(shū) Lesson27 - 實(shí)戰(zhàn)分析：評(píng)論功能（六）》。