React.js 小書 Lesson26 - 實戰分析：評論功能（五）

Nekron 發布于2019-08-21 17:33 / 2903人閱讀

摘要：修改請輸入用戶名請輸入評論內容我們增加了和分別用于加載和保存評論列表數據。現在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。下一節中我們將介紹小書實戰分析評論功能六。

React.js 小書 Lesson26 - 實戰分析：評論功能（五）

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

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

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

持久化評論

同樣地，可以通過類似于用戶名持久化的方式對評論列表內容進行持久化，讓用戶發布的評論在刷新頁面以后依然可以存在。修改 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("請輸入用戶名")
    if (!comment.content) return alert("請輸入評論內容")
    const comments = this.state.comments
    comments.push(comment)
    this.setState({ comments })
    this._saveComments(comments)
  }
...

我們增加了 _loadComments 和 _saveComments 分別用于加載和保存評論列表數據。用戶每次提交評論都會把評論列表數據保存一次，所以我們在 handleSubmitComment 調用 _saveComments 方法；而在 componentWillMount 中調用 _loadComments 方法，在組件開始掛載的時候把評論列表數據加載出來 setState 到 this.state 當中，組件就可以渲染從 LocalStorage 從加載出來的評論列表數據了。

現在發布評論，然后刷新可以看到我們的評論并不會像以前一樣消失。非常的不錯，持久化評論的功能也完成了。

顯示評論發布時間

現在我們給每條評論都加上發布的日期，并且在評論列表項上顯示已經發表了多久，例如“1 秒前”、“30分鐘前”，并且會每隔 5 秒進行更新。修改 src/CommentInput.js 當用戶點擊發布按鈕的時候，傳出去的評論數據帶上評論發布的時間戳：

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

在評論列表項上顯示評論，修改 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}
        
      
    )
  }
}

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

再看看頁面顯示：

這時候的時間是不會自動更新的。除非你手動刷新頁面，否則永遠顯示“1 秒前”。我們可以在 componentWillMount 中啟動一個定時器，每隔 5 秒調用一下 _updateTimeString，讓它去通過 setState 更新 timeString：

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

這樣就可以做到評論的發布時間自動刷新了，到這里前 4 個需求都已經完成了。

下一節中我們將介紹《React.js 小書 Lesson27 - 實戰分析：評論功能（六）》。

云服務器 GPU云服務器 jsp評論功能開發五星星評價功能 React.js react.js cdn

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89677.html

寫一本關于 React.js 的小書

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

Scorpion 2019-08-21 11:39 評論0 收藏0
React.js 小書 Lesson25 - 實戰分析：評論功能（四）

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

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

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

Gilbertat 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson14 - 實戰分析：評論功能（一）

摘要：對于上面這個評論功能，可以粗略地劃分成以下幾部分評論功能的整體用一個叫的組件包含起來。每個評論列表項由獨立的組件負責顯示，這個組件被所使用。下一節中我們將介紹小書實戰分析評論功能二。 React.js 小書 Lesson14 - 實戰分析：評論功能（一）本文作者：胡子大哈本文原文：http://react.huziketang.com/blog/lesson14 轉載請注明出處，保...

QiuyueZhong 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson15 - 實戰分析：評論功能（二）

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

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