开发者学堂课程【React 入门与实战：评论列表案例-创建 CmtList 组件并渲染基本页面结构】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8105
评论列表案例-创建 CmtList 组件并渲染基本页面结构
一、渲染评论列表
这是评论列表
评论人：张三 评论内容：哈哈，沙发 |
评论人：李四 评论内容：哈哈，板凳 |
评论人：王五 评论内容：哈哈，凉席 |
评论人：赵六 评论内容：哈哈，砖头 |
评论人：田七 评论内容：哈哈，楼下山炮 |
里面的评论项都是用 for 循环创建出来的。
最外层定义为大组件叫做评论列表组件，里面每一个评论项叫做评论项组件。这样就有了两个组件：父组件，子组件。评论项所对应的数据放在父组件，作为私有数据。
二、通过 for 循环生成多个组件
1. 数据：
commentlist: [
{ id: 1, user:‘张三", content:‘哈哈，沙发’},
{ id: 2, user:‘李四",content:‘哈哈，板凳’},
{ id : 3, user: ‘王五', content:‘哈哈，凉席’},
{ id: 4,user:‘赵六',content:‘哈哈，砖头’}，
{ id: 5, user:‘田七', content:‘哈哈，楼下山炮”}
]
第一步，创建父组件，有两种方式：创建成 class 有状态组件；普通的 function 无状态组件。数据在这里是写死的，在企业中是通过 ajax 拿到的，所以要用有状态的组件。
//使用 class 关键字，定义父组件
class CmtList extends React.Component{
constructor(){
super()
this.state = { }
}
render( ){
return <div>
111
//这里创建 div 标签的作用是占位
此时执行效果如下：
<div>
<h1>这是评论列表组件<h1>
</div>
}
}
这样评论列表组件就有了，然后将数据写入 state
ComentList：[ //评论列表数据
{ id: 1， user:'张三', content: ‘哈哈，沙发’}，
{ id: 2,user: ‘李四',content:‘哈哈，板凳’}，
{ id: 3,user: '王五', content:‘哈哈，凉席’}，
{ id: 4, user:‘赵六',content:‘哈哈，砖头’}，
{ id: 5,user:‘田七', content:‘哈哈，楼下山炮’}
]
循环 ComentList 的每一项才能在页面上创建对应的 UI 元素，所以：
{this.state.CommentList.map(item => <div>{item.user}</div>)}
.map：对数组每一项进行操作并返回新数组
第一次循环完出现的是第一条数据包装成 div 放到数组里，其他数据同理。当整个循环完成后得到新数组，里面包含五个 div 里面包含每个名字。
运行提示缺少 Key，所以在 div 后加上：
key={item.id
这时候只有名字所以要把结构完善：
将div里放入子元素
{this.state.CommentList.map(item => <div key={item. id}>
<h1>评论人: {item.user}</h1>
<p>评论内容:{item.contentl</p>
</div)}
循环了 ComentList 组件上的私有数据，由于数据是一个数组，直接调用数组的 .map 函数，对数组每一项进行操作并且把返回的结果当作一个新数组，最终把新数组放到页面上。
