Skip to content

Latest commit

 

History

History
142 lines (118 loc) · 6.21 KB

受控组件和非受控组件.md

File metadata and controls

142 lines (118 loc) · 6.21 KB

受控组件和非受控组件

React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部state的实现方式的不同,就产生了受控组件和非受控组件。

受控组件

HTML的表单元素中,它们通常自己维护一套state,并随着用户的输入自己进行UI上的更新,这种行为是不被我们程序所管控的,而如果将React里的state属性和表单元素的值建立依赖关系,再通过onChange事件与setState()结合更新state属性,就能达到控制用户输入过程中表单发生的操作,React以这种方式控制取值的表单输入元素就叫做受控组件。
React中定义了一个input输入框的话,它并没有类似于Vuev-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,否则请设置onChangereadOnly
这段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中。
  • 在受控组件中,组件渲染出的状态与它的valuechecked prop相对应。
  • react受控组件更新state的流程:
    • 通过在初始state中设置表单的默认值。
    • 每当表单的值发生变化时,调用onChange事件处理器。
    • 事件处理器通过合成对象event拿到改变后的状态,并更新应用的state
    • SetState触发视图的重新渲染,完成表单组件值的更新。

非受控组件

  • 如果一个表单组件没有value prop就可以称为非受控组件。
  • 非受控组件是一种反模式,它的值不受组件自身的stateprops控制。
  • 通常需要为其添加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