受控组件和非受控组件
受控组件和非受控组件
React的受控组件与非受控组件的概念是相对于表单而言的，在React中表单元素通常会持有一下内部的state，因此它的工作方式与其他HTML元素不一样，而获取表单元素内部state的实现方式的不同，就产生了受控组件和非受控组件。
受控组件
在HTML的表单元素中，它们通常自己维护一套state，并随着用户的输入自己进行UI上的更新，这种行为是不被我们程序所管控的，而如果将React里的state属性和表单元素的值建立依赖关系，再通过onChange事件与setState()结合更新state属性，就能达到控制用户输入过程中表单发生的操作，React以这种方式控制取值的表单输入元素就叫做受控组件。
在React中定义了一个input输入框的话，它并没有类似于Vue里v-model的这种双向绑定功能，也就是说我们并没有一个指令能够将数据和输入框结合起来，用户在输入框中输入内容，然后数据同步更新。
class Input extends React.Component {
render () {
return <input name="username" />
}
}用户在界面上的输入框输入内容时，它是自己维护了一个state，这个state并不是我们平常看见的this.state，而是每个表单元素上抽象的state，这样的话就能根据用户的输入自己进行UI上的更新，如果我们想要控制输入框的内容，而输入框的内容取决的是input中的value属性，那么我们可以在this.state中定义一个名为username的属性，并将input上的value指定为这个属性。
class Input extends React.Component {
constructor (props) {
super(props);
this.state = { username: "1" };
}
render () {
return <input name="username" value={this.state.username} />
}
}但是这时候你会发现input的内容是只读的，因为value会被我们的this.state.username所控制，当用户输入新的内容时，this.state.username并不会自动更新，这样的话input内的内容也就不会变了，此时控制台通常会抛出一个Warning。
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.您为表单字段提供了一个没有onChange处理程序的value属性，这将呈现只读字段，如果字段应该是可变的，请使用defaultValue，否则请设置onChange或readOnly。
这段Warning其实给出了对于这个问题的解决方案，我们只需要对组件的onChange事件来监听输入内容的改变并使用setState更新this.state.username即可，如此我们在当前组件中能够控制这个表单元素的值，这就是受控组件。
class Input extends React.Component {
constructor (props) {
super(props);
this.state = { username: "1" };
}
render () {
return (
<>
<input name="username" value={this.state.username}
onChange={e => this.setState({username: e.target.value})}
/>
<button onClick={() => console.log(this.state.username)} >Log</button>
</>
)
}
}此外需要注意的是，如果是讲此组件作为一个共用的组件用以调用的话，是有弊端的，尽管此时Input组件本身是一个受控组件，但与之相对的调用方失去了更改Input组件值的控制权，所以对调用方而言，Input组件是一个非受控组件，以非受控组件的使用方式去调用受控组件是一种反模式，下边的例子都是属于Hooks的写法。
// 组件提供方
function Input({ defaultValue }) {
const [value, setValue] = React.useState(defaultValue)
return <input value={value} onChange={e => setValue(e.target.value)} />
}
// 调用方
function UseInput() {
return <Input defaultValue={1} />
}如果要对于组件提供方还是调用方Input组件都为受控组件，只需要提供方让出控制权即可。
// 组件提供方
function Input({ value, onChange }) {
return <input value={value} onChange={onChange} />
}
// 调用方
function UseInput() {
const [value, setValue] = React.useState(1);
return <Input value={value} onChange={e => setValue(e.target.value)} />
}非受控组件
如果表单元素并不经过state，而是通过ref修改或者直接操作DOM，那么它的数据无法通过state控制，这就是非受控组件。
class Input extends React.Component {
constructor (props) {
super(props);
this.input = React.createRef();
}
render () {
return (
<>
<input name="username" ref={this.input} />
<button onClick={() => console.log(this.input.current.value)} >Log</button>
</>
)
}
}总结
受控组件
- 每当表单的状态发生变化时，都会被写入到组件的
state中。 - 在受控组件中，组件渲染出的状态与它的
value或checked prop相对应。 react受控组件更新state的流程:- 通过在初始
state中设置表单的默认值。 - 每当表单的值发生变化时，调用
onChange事件处理器。 - 事件处理器通过合成对象
event拿到改变后的状态，并更新应用的state。 SetState触发视图的重新渲染，完成表单组件值的更新。
- 通过在初始
非受控组件
- 如果一个表单组件没有
value prop就可以称为非受控组件。 - 非受控组件是一种反模式，它的值不受组件自身的
state或props控制。 - 通常需要为其添加
ref prop来访问渲染后的底层DOM元素。 - 可通过添加
defaultValue指定value值。
每日一题
https://github.com/WindrunnerMax/EveryDay参考
https://muyunyun.cn/posts/8bdf2cdf/
https://zhuanlan.zhihu.com/p/89223413
https://juejin.cn/post/6844904154133954568
https://juejin.cn/post/6858276396968951822
https://segmentfault.com/a/1190000022925043
https://segmentfault.com/a/1190000012458996
https://zh-hans.reactjs.org/docs/glossary.html