受控组件和非受控组件

受控组件和非受控组件

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