react实现双向绑定
React 实现双向绑定的方法
React 本身是单向数据流框架，但可以通过以下方式模拟双向绑定效果：
受控组件方式
通过 value 和 onChange 实现表单元素与状态的同步：
function ControlledComponent() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return <input value={value} onChange={handleChange} />;
}使用自定义 Hook
封装通用双向绑定逻辑：
function useBind(initialValue) {
const [value, setValue] = useState(initialValue);
const bind = {
value,
onChange: e => setValue(e.target.value)
};
return [value, bind];
}
function Example() {
const [text, textBind] = useBind('');
return <input {...textBind} />;
}类组件实现
通过 setState 实现双向绑定：
class ClassComponent extends React.Component {
state = { value: '' };
handleChange = (e) => {
this.setState({ value: e.target.value });
};
render() {
return <input
value={this.state.value}
onChange={this.handleChange}
/>;
}
}第三方库方案
使用如 react-hook-form 等库简化实现：
import { useForm } from 'react-hook-form';
function Form() {
const { register, handleSubmit } = useForm();
return (
<form onSubmit={handleSubmit(data => console.log(data))}>
<input {...register("example")} />
</form>
);
}注意事项
- 受控组件会触发多次渲染，对性能敏感场景需优化
- 文件输入等特殊表单元素需要特殊处理
- 复杂表单建议使用 Formik 等专业表单管理库
- 非受控组件模式（通过 ref 获取值）不提供实时数据绑定
以上方法可根据具体场景选择使用，React 社区更推荐受控组件方式实现明确的数据流管理。
