react 双重绑定实现原理

双向绑定的基本概念

React中的双向绑定通常指表单元素（如input、select等）的值与组件状态（state）的同步更新。当用户修改表单值时，状态自动更新；反之，状态变化时表单值也同步更新。

实现双向绑定的核心方法

通过value和onChange属性实现数据与UI的同步。表单元素的value绑定到组件的state，onChange事件触发state更新，从而形成闭环。

import React, { useState } from 'react';

function TwoWayBindingExample() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

类组件中的实现方式

在类组件中，使用this.state和this.setState实现相同的逻辑：

class TwoWayBindingClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
  }

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  };

  render() {
    return (
      <input
        value={this.state.inputValue}
        onChange={this.handleChange}
      />
    );
  }
}

自定义Hook封装

可封装自定义Hook简化双向绑定的复用逻辑：

function useTwoWayBinding(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => setValue(event.target.value);
  return { value, onChange };
}

// 使用示例
function MyComponent() {
  const inputProps = useTwoWayBinding('');
  return <input type="text" {...inputProps} />;
}

复杂对象的绑定

处理嵌套对象或表单组时，可通过动态属性名实现：

function ComplexForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
    </>
  );
}

与第三方库结合

使用如formik或react-hook-form等库可简化复杂场景的双向绑定：

import { useForm } from 'react-hook-form';

function FormWithLibrary() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("example")} />
      <button type="submit">Submit</button>
    </form>
  );
}