react 组件基本设计

这个react 笔记我会一直写下去，直到将知识点弄的差不多！

容器组件 VS 展示组件
基本原则：容器组件负责数据获取，

展示组件负责根据props显示信息
优势：更小、更专注、重用性高、高可用、易于测试、性能更好

import React, { Component } from "react";
// 容器组件
export default class CommentList extends Component {
constructor(props) {
super(props);
this.state = {
comments: []
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
comments: [
{ body: "react is very good", author: "facebook" },
{ body: "vue is very good", author: "youyuxi" }
]
});
}, 1000);
}
render() {
return (
<div>
{this.state.comments.map((c, i) => (
<Comment key={i} data={c} />
))}
</div>
);
}
}
// 展示组件
function Comment({ data }) {
return (
<div>
<p>{data.body}</p>
<p> --- {data.author}</p>
</div>
);
}