开发者学堂课程【React 入门与实战：评论列表案例-将评论列表组件和评论项组件抽离为单独的组件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8107
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件
//使用 function 构造函数，定义普通的无状态组件
function CmtItem(props) {…}
//使用 class 关键字，定义父组件
class Cmtlist extends React.Component{…}
两个组件都已经写在了入口文件中，接下来要想办法把这两个组件抽离出去。
对于 function ：
在 components 文件下新建一个 CmtItem.jsx 将代码完整的放到里面：
//使用 function 构造函数，定义普通的无状态组件
function CmtItem(props){
return <div>
<h1>评论人: {props.user}</h1>
<p>评论内容:{props.content}</p>
</div>
}
它是一个组件，必须依赖 import React from ‘react’
文件有自己的独立作用域，外界访问不到，创建 export default。
对于 Class ：
在首页中 CmtList 中用到了 Item 项，就要先导入过来：
//导入评论项子组件
import CmtItem from './ components/CmtItem'
保存。
然后将
//使用 class 关键字，定义父组件
cLass CmtList extends React.Component { …}
也抽离出去。
在 components 目录新建 CmtList.jsx 将代码完成带入：
class CmtList extends React.Component {
iconstructor() {
super()
this.state = {
CommentList: [l/评论列表数据
{ id: 1, user:‘张三' ,content:‘哈哈，沙发’}，
{ id: 2, user: ‘李四',content: ‘哈哈，板凳’}，
{ id: 3, user: '王五', content:‘哈哈，凉席’}，
{ id: 4,user:'赵六' , content:‘哈哈，砖头’}，
{ id: 5,user:'田七', content:‘哈哈，楼下山炮’}
]
}
这里也需要依赖 import React from 'react' ，外界访问不到也需要 export default
因为代码中会用到 CmtItem，所以需要先导入：
//导入评论项子组件
import CmtItem from ./ components/CmtItem '
在 cmtlist.jsx 中需要访问 cmtitem，现在 cmtlist.jsx 与 cmtitem.jsx 是平级的，所以路径需要改为：
import CmtItem from './CmtItem'
