react评论列表练习

补充内容：

1. unshift()从数组的首部添加数据；
2.  通过获取到文本框里面的内容，把数据提交到浏览器本地存储中即：localStorage
3.  学习中遇到的补充：localStorage.getItem(key):获取指定key本地存储的值

          localStorage.setItem(key,value)：将value存储到key字段

          localStorage.removeItem(key):删除指定key本地存储的值

1. JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
2. JSON 通常用于与服务端交换数据。在向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串
3. Web Storage实际上由两部分组成：sessionStorage与localStorage。
4. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
5. 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
6. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

1. CmtList.jsx: 

import React from 'react'
import CMTItem from './CmtItem.jsx'
import CMTBox from './CmtBox.jsx'

//评论列表组件
export default class CMTList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      list:[
        {user:'李白',content:'床前明月光'},
        {user:'vue',content:'最欢迎的前端框架'},
        {user:'react',content:'最流行的前端框架，可以完成安卓开发的应用，解决了原生app的跨平台的局限性'}
      ]
    }
  }

  // 在组件尚未渲染的时候，就立即 获取数据
  componentWillMount() {
    this.loadCmts()
  }

  render(){
    return <div>
      <h1>评论列表组件</h1>

      {/* 发表评论的组件 */}
      {/* 相对于 Vue 中，把 父组件传递给子组件的 普通属性 和 方法属性，区别对待， 普通属性用 props 接收， 方法 使用 this.$emit('方法名') */}
      {/* react 中，只要是传递给 子组件的数据，不管是 普通的类型，还是方法，都可以使用 this.props 来调用 */}
      <CMTBox reload={this.loadCmts}></CMTBox> {/* 通过this.loadCmts调用方法，然后再子组件中通过this.props调用父组件传过来的方法reload*/}
      
      {/* 循环渲染一些评论内容组件   -----通过map方法解决优化 */}
      {this.state.list.map((item,i) => {
        return <CMTItem key={i} {...item}></CMTItem>
      })}
    </div>
  }

  // 从本地存储中加载 评论列表
  loadCmts = () => {
    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
    this.setState({
      list:list //可以直接写list
    })
  }
}

2.  CmtItem.jsx

 

import React from 'react'
import '../../css/CmtItem.css'
// 评论列表项组件
export default class CMTItem extends React.Component {
  render() {
    return <div style={{ border: '1px solid #ccc', margin: '10px 0',padding:'10px' }}>
      <h3>评论人：{this.props.user}</h3>
      <h5>评论内容：{this.props.content}</h5>
    </div>
  }
}

 3. CmtBox.jsx

import React from 'react'

// 评论列表框组件
export default class CMTBox extends React.Component {
  render(){
    return <div>
      <label>评论人：</label><br />
      <input type="text" ref="user" /><br />
      <label>评论内容：</label><br />
      <textarea cols="30" rows="4" ref="content"></textarea><br />

      <input type="button" value="发表评论" onClick={this.postComment} />
    </div>
  }

  postComment = () => {
    // 1. 获取到评论人和评论内容
    // 2. 从 本地存储中，先获取之前的评论数组
    // 3. 把 最新的这条评论，unshift 进去
    // 4. 在把最新的评论数组，保存到 本地存储中

    var cmtInfo = {user: this.refs.user.value, content: this.refs.content.value}
    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
    list.unshift(cmtInfo)
    localStorage.setItem('cmts',JSON.stringify(list))

    this.refs.user.value = this.refs.content.value = '' //这样做就是让点击之后文本框的文字消失
    
    this.props.reload() //子组件不仅可以通过过this.props来获取父组件的传递过来的数据，还可以调用父组件内部的方法
  }
}