react如何双向数据绑定
双向数据绑定的实现方法
React 本身是单向数据流的设计理念，但可以通过以下方式实现类似双向数据绑定的效果：
受控组件方式
通过 value 和 onChange 事件实现双向绑定：
function App() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return <input value={value} onChange={handleChange} />;
}表单元素的值由 React 状态控制，任何输入变化都会触发状态更新。
使用自定义 Hook
创建可复用的双向绑定 Hook：
function useBind(initialValue) {
const [value, setValue] = useState(initialValue);
const bind = {
value,
onChange: e => setValue(e.target.value)
};
return [value, bind];
}
// 使用示例
function Form() {
const [username, bindUsername] = useBind('');
return <input {...bindUsername} />;
}第三方库解决方案
使用专门的双向绑定库：
mobx-react的@observer和可观察对象react-hook-form的表单管理final-form的高级表单解决方案
非受控组件方式
结合 ref 和事件监听实现：
function Uncontrolled() {
const inputRef = useRef();
const handleClick = () => {
console.log(inputRef.current.value);
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</>
);
}注意事项
- 受控组件是 React 推荐的方式，能保证状态单一来源
- 复杂表单建议使用 Formik 或 react-hook-form 等专业库
- 性能敏感场景需注意避免不必要的重新渲染
