react实现双向绑定原理
React 双向绑定原理
React 本身是单向数据流的设计理念，但可以通过特定方式实现类似双向绑定的效果。以下是常见的实现方法：
受控组件方式
通过 value 和 onChange 属性控制表单元素的状态变化：
function ControlledComponent() {
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 onChange = (e) => {
setValue(e.target.value);
};
return {
value,
onChange
};
}
function MyComponent() {
const inputProps = useBind('');
return <input {...inputProps} />;
}非受控组件结合 ref
对于某些场景可以使用 ref 获取 DOM 值：
function UncontrolledComponent() {
const inputRef = useRef();
const handleClick = () => {
console.log(inputRef.current.value);
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</>
);
}第三方库实现
如使用 react-hook-form 等表单库：
import { useForm } from 'react-hook-form';
function Form() {
const { register, handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("example")} />
<button type="submit">Submit</button>
</form>
);
}原理总结
React 的双向绑定本质是通过：
- 状态管理（useState）存储当前值
- 事件处理（onChange）更新状态
- 状态变化触发重新渲染
- 新值通过 props 传递回组件
这种模式保持了 React 的单向数据流特性，同时实现了双向绑定的用户体验。
