受控制组件与非受控组件

本文以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 应用架构等方式来达到统一组件状态的目的。