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> ); }