封装非受控状态:对比 arco-design:useMergeValue 与 ahooks:useControllableValue 实现

2024-01-12 23:18:26

在 React 中，受控状态和非受控状态都是常见的状态管理模式。受控状态是指组件通过内部状态来控制表单元素的值，而非受控状态是指组件通过外部属性来控制表单元素的值。

当我们需要在 React 中封装一个非受控状态时，可以使用 arco-design:useMergeValue 和 ahooks:useControllableValue 这两个库。这两个库都提供了简单易用的 API 来实现非受控状态的封装。

useMergeValue

useMergeValue 是 arco-design 提供的一个 Hook，用于封装非受控状态。其基本用法如下：

const [value, setValue] = useMergeValue('');

其中，value 是非受控状态的值，setValue 是设置非受控状态值的函数。

useMergeValue 的优点在于简单易用，并且支持受控和非受控状态的混合使用。

const [value, setValue] = useMergeValue('');

const handleChange = (e) => {
  setValue(e.target.value);
};

return (
  <input value={value} onChange={handleChange} />
);

在这个例子中，当用户输入时，handleChange 函数会调用 setValue 函数来更新非受控状态的值。

useControllableValue

useControllableValue 是 ahooks 提供的一个 Hook，用于封装非受控状态。其基本用法如下：

const [value, setValue, isControlled] = useControllableValue('', props.value);

其中，value 是非受控状态的值，setValue 是设置非受控状态值的函数，isControlled 是一个布尔值，表示状态是否被控制。

useControllableValue 的优点在于可以同时支持受控和非受控状态，并且可以方便地检测状态是否被控制。

const [value, setValue, isControlled] = useControllableValue('', props.value);

const handleChange = (e) => {
  setValue(e.target.value);
};

return (
  <input value={value} onChange={isControlled ? null : handleChange} />
);