React.js 小书 Lesson26 - 实战分析：评论功能（五）

Nekron 发布于2019-08-21 17:33 / 2885人阅读

摘要：修改请输入用户名请输入评论内容我们增加了和分别用于加载和保存评论列表数据。现在发布评论，然后刷新可以看到我们的评论并不会像以前一样消失。非常的不错，持久化评论的功能也完成了。下一节中我们将介绍小书实战分析评论功能六。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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