07-react应用-组件化编码

目录

• • 样式模块化
  • 功能界面的组件化编码流程（通用）
  • 案例总结
  • • todoList案例相关知识点

样式模块化

//样式模块化
index.module.css

import hello from './index.module.css'

div className={hello.title}

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

1. 拆分组件: 拆分界面,抽取组件

2. 实现静态组件: 使用组件实现静态页面效果

3. 实现动态组件

   3.1 动态显示初始化数据

   3.1.1 数据类型
   3.1.2 数据名称
   3.1.3 保存在哪个组件?

   3.2 交互(从绑定事件监听开始)

案例总结

todoList案例相关知识点

	1.拆分组件、实现静态组件，注意：className、style的写法
	2.动态初始化列表，如何确定将数据放在哪个组件的state中？
				——某个组件使用：放在其自身的state中
				——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）
	3.关于父子之间通信：
			1.【父组件】给【子组件】传递数据：通过props传递
			2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数
	4.注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value
	5.状态在哪里，操作状态的方法就在哪里