React 受控组件和非受控组件

受控组件 Controlled Component

受控组件使用useState，在value中指定useState中的值，并且在onChange中使用useState的set函数更新值。

注意：受控组件可以实现类似Vue中的双向绑定的效果。

const [data, setData] = useState("");

<input vlaue={data} onChange={(v) => {
    setData(v);
}}>

非受控组件 Uncontrolled Component

非受控组件使用useRef，并且在onChange中更新useRef的值。

注意：非受控组件没有类似Vue中的双向绑定的效果。

const ref = useRef();

<input onChange={(v) => {
    ref.current = v;
}}>