我果然还是喜欢白一点的 —— React开发中的白盒表单vs黑盒表单
最新回答
薰衣草香
2025-02-25 06:28:04
在我的这篇文章中，我提到了受控组件和非受控组件，引起了一点争议。让我来解释一下这两个概念。
受控组件，我称之为白盒组件，它指的是表单的值和输入回调都受我们的代码直接控制。在使用白盒组件时，我们可以更灵活地控制表单流程，从而实现更复杂的逻辑。
非受控组件，我称之为黑盒组件，它将表单相关的值、回调交给了浏览器的原生代码处理，通过组件的引用获取当前表单状态。这种模式下，表单的状态可能由用户输入或组件引用间接控制，这可能会导致代码的可读性和一致性问题。
对于复杂表单，我更倾向于使用受控组件。例如，在某个表单中，当用户改变 A 选项框的值，B 选项框的当前值也需要变化。在受控组件中实现这个逻辑就相对简单，只需要添加一个 country 的 onChange 回调。而在非受控组件中，实现这个功能会相对复杂。
另一个例子是处理敏感词。在评论框中，如果用户输入了敏感词，我们需要实时替换掉敏感词。在受控组件中，我们可以通过 setFieldValue 或者 handleChange 来实现这个功能，代码流程保持了一致性，没有打破单源真理原则。
在特殊场景下，我们可能需要在表单中自定义表单验证错误消息。在受控表单库中，由于 errors 和 values 一样暴露在代码中，我们可以根据需求自定义错误信息，实现动态验证规则。
综上所述，白盒表单（受控组件）在灵活性和一致性方面具有优势。它允许我们直接控制表单逻辑，而不会引入额外的复杂性和不确定性。这是为什么我更喜欢白盒表单的原因。
热门标签
