【第3章】3.2 react功能界面组件的组合使用

组件的组合使用

1.功能界面的组件化编码流程（通用）

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件
   ①动态显示初始化数据(数据类型 数据名称 保存在哪个组件?)
   ②交互(从绑定事件监听开始)

2.组件的组合使用-TodoList [小案例]

1.我们写一下小案例dome，更好的理解组件化开发

功能: 组件化实现此功能如下图所示

1. 显示所有todo列表
2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

2.分析

如图所示，我们先分为三大组件Header(头部) 、List(中间列表)、Footer(底部)，然后中间部分继续分为每一个列组件Item