React 组件的受控与非受控

发布网友发布时间：2024-10-04 05:26

共1个回答

热心网友时间：2024-12-12 22:50

在面试中，经常会遇到关于antd Input组件是受控还是非受控的问题，其实这个问题的答案并不唯一，取决于组件的使用方式。Input既可以是受控组件，也可以是非受控组件，关键在于如何在项目中运用。

让我们从理解概念开始：非受控组件内部有自己的状态，不依赖外部控制，而受控组件则依赖外部传递的props。两者通过状态同步来区分，如图所示：

在实际开发中，很多组件库，如antd-mobile，需要支持受控和非受控两种模式。以5.17版本为例，许多输入、切换和展开收起组件都需实现这种灵活性。

实现这种功能的一个常见方案是内外两个状态手动同步，但存在性能问题。我们需要解决的问题包括：保证原子性，即使状态同步有延迟也能获取最新值，以及优化性能，避免不必要的渲染。通过Ref和forceUpdate，我们可以在渲染阶段直接更新状态，简化代码并提高可复用性。

进一步，将这个逻辑抽象为自定义Hook，如usePropsValue，使得组件间切换模式更为方便。然而，还存在一个隐藏的bug，即在某些情况下，onChange事件会被意外触发。修复这个bug后，我们得到了一个功能完善且在antd-mobile中可复用的解决方案。

最后，尽管文章提到“React 不允许在 render 过程中调用 setState”，但评论指出，实际上是可以的，但仅限于触发当前组件的状态更新。