React中受控和非受控组件

• 受控组件：组件的值由React控制的组件，即组件的值由React的state控制的组件。
• 非受控组件：组件的值由DOM控制的组件，即组件的值由DOM的value控制的组件。
• 区别：受控组件的值始终由React的state控制，而非受控组件的值可以随时被用户修改。
• 受控组件的优点：
• 1. 可以在组件的值改变时执行一些操作，如表单验证。
• 2. 可以在组件的值改变时更新React的state，实现双向数据绑定。

我们看下面例子：

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      username: "coderwhy"
    }
  }

  inputChange(event) {
    console.log("inputChange:", event.target.value)
    this.setState({ username: event.target.value })
  }

  render() {
    const { username } = this.state

    return (
      <div>
        {/* 受控组件 */}
        <input type="checkbox" value={username} onChange={e => this.inputChange(e)}/>

        {/* 非受控组件 */}
        <input type="text" />
        <h2>username: {username}</h2>
      </div>
    )
  }
}

export default App

在这个例子中，第一个input是受控组件，它的值由React的state控制，当用户修改这个输入框的值时，会触发onChange事件，从而更新React的state。第二个input是非受控组件，它的值由DOM控制，不会触发onChange事件，而是由用户修改。最后我们附上浏览器上的效果图：

感谢大家的支持，我们下次见