跳到主要内容

为什么高性能？

从 局部渲染 非受控表单 Form Tree&Form State 三个方面来解释为什么高性能。

局部渲染​

React 是一种基于状态变化触发 UI 重新渲染的库。如果状态的每一次变化都触发整个应用的重新渲染，这会引起大量不必要的 DOM 操作，导致性能下降。通过局部渲染，我们可以只重新渲染那些状态实际改变的组件，避免不必要的 DOM 操作，从而提高性能。

非受控表单​

  • 简化状态管理：非受控组件直接从 DOM 获取值，减轻了 React 的状态管理负担。因为不需要频繁地同步输入框的值与 state，所以代码可能更为简洁，易于维护。

  • 提高性能：非受控组件不需要在每次输入时都触发重新渲染，只在需要验证或提交表单时读取其值。这种做法减少了不必要的渲染，有利于提高应用的性能。

Form Tree & Form State​

名词解释​

  • "Form Tree"通常对应于表单的 UI（用户界面）结构。它代表了表单中的所有元素（如输入框，复选框，下拉列表等）以及这些元素的层级关系。这种树形结构有助于我们理解和处理表单的布局和交互。
  • "Form State"则对应于表单中各元素的值以及这些值如何随着用户交互而改变。这通常包括一些状态，如每个表单元素的当前值，表单是否已被修改，是否有任何验证错误等。

为什么要分离？​

  • 我们使用 Hook Form 进行了 Form State 的管理，但是它并不能管理 Form Tree，我们选择编写代码的方式管理 Form Tree。这样我们在使用 自定义事件 的时候来操作组件属性的时候，就可以局部渲染指定的组件，而不是整个表单渲染，从而提高性能。

  • 将表单的 UI 结构和状态分开管理，可以让代码更清晰、更易于维护。状态管理负责跟踪表单的状态变化，UI 结构则负责如何显示表单。这种分离使得你可以独立地管理状态逻辑和 UI 逻辑，而不会相互干扰。

  • 通过独立管理 "Form State"，开发者可以更精确地控制用户输入和表单验证的处理方式，例如在特定字段更改后进行即时验证。