面试题：React受控与非受控组件在复杂交互场景下的设计与实践

Question

假设你正在开发一个具有复杂交互的表单，其中包含多个相互关联的输入字段，部分字段需要实时验证并反馈给用户，同时有些字段在特定条件下才允许用户修改。请阐述如何综合运用受控组件和非受控组件来实现该需求，详细说明设计思路、状态管理以及组件之间的通信方式。

Answer 1

设计思路

1. 受控组件：对于需要实时验证并反馈给用户的字段，使用受控组件。受控组件由 React 组件的 state 控制其值，每次输入变化都会触发 onChange 事件，在事件处理函数中可以进行验证逻辑，并更新 state 以反映最新的输入状态和验证结果。这样可以实时将验证信息反馈给用户。
2. 非受控组件：对于在特定条件下才允许用户修改的字段，在初始渲染时用非受控组件获取其初始值。非受控组件的值不受 React state 直接控制，而是由 DOM 自身保存其值。当特定条件满足时，可以通过 ref 获取该组件的值并进行操作。

状态管理

1. 使用 useState 或 useReducer：对于简单的表单状态，可以使用 useState 来管理单个字段的状态，例如输入值和验证结果。对于复杂的表单状态，特别是涉及多个字段之间的联动和复杂逻辑，可以使用 useReducer。useReducer 可以将状态更新逻辑集中在 reducer 函数中，便于维护和管理。
2. 状态结构：设计一个合适的状态结构，以清晰地表示表单中各个字段的状态。例如，可以使用一个对象来存储每个字段的输入值、验证状态、是否可修改等信息。

组件之间的通信方式

1. 属性传递：如果表单组件是父子关系，可以通过父组件向子组件传递属性来共享状态和传递控制逻辑。例如，父组件将验证函数作为属性传递给需要实时验证的子组件，子组件在 onChange 事件中调用该函数进行验证，并将验证结果返回给父组件更新状态。
2. 上下文（Context）：当表单组件层次较深或者需要在多个非直接父子组件之间共享状态时，可以使用 React 上下文。创建一个上下文对象，在顶层表单组件中提供上下文，需要共享状态的子组件通过消费上下文来获取和更新状态。这样可以避免在组件树中层层传递属性。