前言：聊聊为什么要在 React 里“模仿” v‑model

说实话，我一开始kan到 Vue 那个 v-model，心里就乐了。

那玩意儿简直是表单的神器，一行代码搞定双向绑定。

可一转头，React 那边没有现成的语法糖。

哈哈，别慌，咱们慢慢来。

在 React 里Zui常见的Zuo法就是把 value 绑到 state，上 onChange 把Zui新值塞回去。

kan下面这个Zui基础的例子：

function Demo {
  const  = useState;
  return (
     setName}
    />
  );
}

这个写法叫受控组件，因为输入框的值完全受 React 控制。

不过呢，受控组件每敲一个字dou会触发一次渲染。

Ru果表单hen大，这渲染成本有点像开了挂——说不定卡顿。

手动写一堆 setXxx 太麻烦？用一个对象搞定！

function LoginForm {
  const  = useState;
  const handle = field => e =>
    setForm);
  return (
    

      
      
    
  );
}

有时候，你根本不想每敲一个字符dou跑 state，那就Ke以走非受控路线，用 ref 在提交时才拿值。

function Uncontrolled {
  const nameRef = useRef;
  const submit =  => alert;
  return (
    

      
      提交
    
  );
}

这玩意儿叫非受控组件，它省掉了频繁渲染，但失去了即时同步的便利。

Ru果你真的想要像 Vue 那样“一行代码搞定”，Ke以封装一个 Hook。

function useModel {
  const  = useState;
  const bind = {
    value,
    onChange: e => setValue
  };
  return ;
}
// 用法：
function Profile {
  const  = useModel;
  return ;
}

不对不对，这里应该是把 {...ageBind} 放进 input 才对。哈哈，一会儿脑子抽风了。

这样，你只需要一行代码就Neng得到双向绑定效果——几乎和 v‑model 挂钩一样舒服。

If you love HOC，Ke以写个包装器：

function withModel {
  return function {
    const  = useState;
    return (
       setVal}
      />
    );
  };
}
// 示例
const InputWithModel = withModel;
function Demo {
  return ;
}

其实市面上Yi经有不少成熟的表单库，把这些细节dou帮你封装好了：

: 用 /