【React】归纳篇（五）组件组合的使用 | 受控与非受控组件 | 组件的综合练习 | 获取表单数据

今天我们来一个小练习，最常见的TODO练习，将组件进行组合使用。

首先明确以下3点：
功能界面的组件化编码流程（重要）

• 1、拆分组件：例如把一个整体界面进行拆分，分为一个个单个组件
• 2、实现静态组件：使用组件实现静态页面效果
• 3、实现动态苏建：动态显示初始化数据；实现交互功能，如绑定事件监听

思考？

• 数据应该保存在哪个组件内？

分析：

• 1、看数据是某个组件需要，还是某些组件需要。某个组件需要就保存在某个组件。某些组件需要就保存在这些组件共同的父组件中；
• 2、然后看数据是什么类型；

思考？

• 子组件中改变父组件的状态：不能在子组件中直接改变父组件的状态
• 方法：状态在哪个组件，更新状态的行为（函数）就应该定义在哪个组件
• 子组件去调用父组件的方法
• 父组件定义函数，传递给子组件，子组件进行调用

示例：

小结–组件组合编写的流程(记住流程)

• 1、拆分组件：根据页面结构拆分组件
• 2、实现静态组件：先给组件类指定render(),每个组件都指定。（此时没有动态数据与交互）
• 3、实现动态组件：先初始化数据的动态显示；然后再添加交互，绑定(bind)事件监听。

在组件中收集表单数据

实际工作中，我们常常需要操作表单数据，如向服务端提交表单数据要发送请求，如检验表单数据合法性，等等。。那么这些操作之前，首先我们需要收集到表单数据。

实例

小结

包含表单的组件分为2类：

• 受控组件：表单项输入数据能自动收集成状态state，如password,读状态state
• 非受控组件： 需要时才手动读取表单的数据,如username,需要手动设置

“受控”与“非受控”两个概念，区别在于这个组件的状态是否可以被外部修改。一个设计得当的组件应该同时支持“受控”与“非受控”两种形式，即当开发者不控制组件属性时，组件自己管理状态，而当开发者控制组件属性时，组件该由属性控制。而开发一个复杂组件更需要注意这点，以避免只有部分属性受控，使其变成一个半受控组件。

大多数情况请，推荐使用“受控组件”来实现表单，比较符合React的思想，但是这两者的效率并没有太大的差异。