antd mobile 作者教你写 React 受控组件和非受控组件

“

关注作者：https://www.zhihu.com/column/c_1455925261150105600

”

曾经，我每次面试时几乎都会问一个问题：antd 中的 Input 组件是受控组件还是非受控组件？

有些人会毫不犹豫的回答：是受控组件，因为有 value 和 onChange，而另外也有一些人会比较犹豫，因为的确似乎说 Input 是受控组件或非受控组件都说得过去。当然，实际上 Input 组件既可以是受控组件，也可以是非受控组件，这完全取决于业务项目中怎么去使用它。

在这篇文章，我们将一起聊聊怎么去让一个组件像 antd 的 Input 组件这样，既支持受控模式，又支持非受控模式。让我们从最简单和基础的部分出发，一点点来分析和演进，看看会遇到哪些问题，又如何一步步解决。

什么是受控组件？什么又是非受控组件？

让我们先来看一个简单的例子，这个 Input 组件有一个内部的状态（State）value，而且它没有任何属性，因此很显然，它是一个非受控的组件，它的组件状态并不受外部环境控制，而是封闭在组件内部。

而如果我们稍微对它做一点调整，把原本的内部状态 value 去掉，放到 props 上去，它就变成了受控组件：

很显然，此时输入框的值是取决于外部传递进来的 props。

如果我们画个图，那可以很清楚的看到受控和非受控的区别：

图中蓝色的方框表示组件，黄色的圆圈表示组件内的状态。

既受控组件又非受控？

尽管在业务项目中，我们写的组件都是明确的受控或者非受控，但对于组件库来说，有非常多的组件需要做到既支持受控模式，又支持非受控模式。以 antd-mobile 现在的 5.17 版本为例，几乎全部的涉及到输入值、切换、展开收起的组件，都是需要做到既受控又非受控的。

尽管听起来似乎不难，但实际写起来还是会遇到一些困难的&#