我们应该如何优雅的处理 React 中受控与非受控

发布网友 发布时间：2024-10-29 07:34

我来回答

共1个回答

热心网友 时间：2024-10-29 10:23

了解了 React 中受控与非受控的基本概念后，我们来聊聊 rc-util 中的 useMergedState Hook。这个 Hook 旨在为开发者提供灵活的表单控件处理方式，支持受控与非受控两种模式。

useMergedState 的主要作用在于，允许开发者基于多层属性传递给底层表单控件，提供受控和非受控两种处理方式，以适应不同场景的需求。例如，Ant-Design 中的 Input 组件即可同时接收 value 和 onChange 的组合方式，以及单独的 defaultValue 实现非受控状态。

实现这个功能的核心在于处理输入值的传入逻辑，确保无论外部传入的是 value 还是 defaultValue，内部都以受控状态处理。当外部传入 defaultValue 时，组件表现为非受控状态，而 value 则确保了受控状态的实现。

为解决 Warning 警告问题，我们对 TextField 组件进行了改造，确保无论传入 value 还是 defaultValue，都能满足两种状态的需求。使用 useMergedState Hook，内部 state 通过受控方式处理，同时外部传入的值根据需要分别作为 value 和 defaultValue。

在 useMergedState 的源码中，初始化逻辑与自定义的逻辑基本一致，使用 useState 初始化状态。同步阶段处理外部传入的值更新 state，而更新阶段通过 changeEventPrevRef 保持对 prevValue 的正确引用，确保正确触发 onChange 事件。

通过 useEvent 包裹 onChange 函数，确保在 ReRender 时直接调用 fnRef.current，避免重新生成 onChange 定义。setState 方法额外接收 ignoreDestroy 参数，避免状态被销毁后仍被调用，优化内存使用。

批处理更新处理中，changeEventPrevRef 作用于非受控状态，确保在多次 patch 更新后仍然能获取正确的 prevValue，从而正确触发 onChange 事件。最终，当 mergedValue 的值更新时，会触发对应使用 LayoutEffect 的操作，确保状态更新逻辑的正确执行。

通过 useMergedState，我们能够灵活地在受控与非受控两种模式间切换，以适应不同场景的需要。这种设计不仅简化了组件的使用，同时也提供了更高的灵活性和兼容性。在日常开发中，合理运用 this Hook 可以有效提升表单处理的效率和用户体验。