约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？

在React中，约束性组件（Controlled Components）和非约束性组件（Uncontrolled Components）的主要区别在于表单数据的处理方式。

• 约束性组件（Controlled Components）：在这种组件中，表单数据是由React组件管理的。每个表单字段的值都直接链接到组件的state。这意味着，当用户输入数据时，会触发一个事件处理器，然后在该事件处理器中更新state，再由state更新输入框的值。这种方式下，React组件完全控制着表单元素的值，无论用户如何操作，表单元素的值都会反映组件state中的值。
• 非约束性组件（Uncontrolled Components）：在这种组件中，表单数据由DOM本身管理，React并不直接操作或控制表单元素。也就是说，React只负责渲染表单元素，但不对其值进行管理和控制。因此，要获取表单数据，需要使用ref从DOM中获取。这种方式下，表单元素的值由用户输入决定，React组件无法直接控制。

总的来说，约束性组件和非约束性组件的主要区别在于React对表单元素值的控制程度。在约束性组件中，React完全控制表单元素的值；而在非约束性组件中，React只负责渲染表单元素，不对其值进行管理和控制。选择使用哪种类型的组件，取决于你的具体需求和设计。