Preact中受控组件状态更新的边界情况解析

在Preact框架中，当使用setState更新状态时，如果新状态值与当前状态值相同，会导致受控组件(如input)失去状态控制的问题。这种现象与React的行为存在差异，是Preact实现机制上的一个特性。

问题现象

开发者通常会为input元素实现一个受控组件，通过onInput事件处理用户输入，并在处理函数中过滤非法字符。例如，只允许输入数字的输入框：

function App() {
  const [value, setValue] = useState('');

  const handleInput = (e) => {
    const newValue = e.target.value.replace(/[^0-9]/g, '');
    setValue(newValue);
  };

  return <input value={value} onInput={handleInput} />;
}

在React中，即使用户输入了非数字字符，输入框也会立即被重置为只包含数字的状态。但在Preact中，当用户输入非法字符时，如果过滤后的值与当前state相同，输入框会短暂显示非法输入，直到下一次合法输入才会更新。

技术原理

这种现象源于Preact的优化策略。Preact在更新DOM时，会对比新旧值，如果值相同则跳过DOM更新。对于input元素，Preact只在value属性实际变化时才会更新DOM。

当用户输入非法字符时：

1. 触发onInput事件
2. 处理函数过滤掉非法字符，得到与原值相同的新值
3. setState调用，但Preact检测到新旧值相同
4. Preact决定不更新DOM，导致非法字符短暂可见

解决方案

1. 使用对象存储状态

将状态存储在对象中可以确保每次更新都创建新引用，强制触发更新：

const [state, setState] = useState({ value: '' });

const handleInput = (e) => {
  const newValue = e.target.value.replace(/[^0-9]/g, '');
  setState({ value: newValue });
};

2. 手动重置DOM值

在处理函数中显式重置input的value属性：

const handleInput = (e) => {
  const newValue = e.target.value.replace(/[^0-9]/g, '');
  e.target.value = newValue;
  setValue(newValue);
};

3. 使用key强制重新渲染

通过改变key强制重新创建input元素：

<input key={value} value={value} onInput={handleInput} />

框架设计考量

Preact的这种行为是出于性能优化的考虑。在大多数情况下，跳过不必要的DOM操作可以提升性能。但对于受控组件这种特殊场景，开发者需要额外注意。

React选择了不同的实现方式，它会在每次渲染时都同步DOM，确保受控组件的行为一致，但这会带来一定的性能开销。Preact则倾向于更激进的优化，将部分控制权交给开发者。

最佳实践

在Preact中实现严格的受控组件时，建议：

1. 对于简单的输入过滤，优先考虑使用上述解决方案
2. 对于复杂的表单场景，可以考虑使用表单管理库
3. 在性能敏感的场景下，评估是否真的需要严格受控，或许可以使用非受控组件配合验证

理解框架的这种差异性有助于开发者更好地选择适合自己项目的解决方案，在功能实现和性能之间取得平衡。