本文以react框架为例，都是以我的大白话叙述的，嘿嘿
受控组件
当一个view的数据来源于data，同时data的数据受到view的改变，这个组件就是受控组件，简单的就像数据双向绑定
对于一个input来说
const [name,setName]=useState("");
...<input value={name} onChange={(e)=>{setName(e.target.value.toUpperCase())}}/>
这个就是受控组件，当你输入lb他显示的时LB
非受控组件
这个就是上面的例子中input没有onChange事件，虽然数据确实来自data，但是却不改变data，可以有用户指定写某个函数控制行为。
const [name,setName]=useState("");const input=useRef<HTMLInputElement>(null)
...
function handel(){cosole.log(ref.current.value)
}...<input value={name} ref={input}/>
受控组件与非受控组件的区别
意义
- 受控组件的状态受到组件的state状态改变
- 非受控组件的状态不受应用状态大的改变，应用中也多了局部组件状态
性能
在受控组件中，每次表单的值发生变化时，都会调用一次 onChange 事件处理器，这确实会
有一些性能上的损耗。虽然使用非受控组件不会出现这些问题，但仍然不提倡在 React 中使用非
受控组件。这个问题可以通过 Flux/Redux 应用架构等方式来达到统一组件状态的目的。
