组件详解：React中的受控组件与非受控组件

2023-10-31 23:27:41

一、受控组件与非受控组件概述

在React中，组件分为两大类：受控组件和非受控组件。受控组件是指其状态由React来管理，非受控组件是指其状态由组件自身管理。

受控组件的优点在于，React可以完全控制组件的状态，从而确保组件的状态与UI保持同步。非受控组件的优点在于，它更加灵活，组件可以自己管理其状态，而无需依赖React。

二、受控组件的实现

受控组件的实现非常简单，只需要在组件的render()方法中，使用受控组件专用的标签来创建表单元素即可。

class MyComponent extends React.Component {
  state = {
    value: ''
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value })
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    )
  }
}

在这个例子中，<input>元素是一个受控组件，其状态由MyComponent组件管理。当用户在<input>元素中输入内容时，handleChange方法会被触发，并将输入的内容更新到MyComponent组件的state中。

三、非受控组件的实现

非受控组件的实现也比较简单，只需要在组件的render()方法中，使用普通的HTML标签来创建表单元素即可。

class MyComponent extends React.Component {
  handleChange = (event) => {
    console.log(event.target.value)
  }

  render() {
    return (
      <input type="text" onChange={this.handleChange} />
    )
  }
}

在这个例子中，<input>元素是一个非受控组件，其状态由组件自身管理。当用户在<input>元素中输入内容时，handleChange方法会被触发，并将输入的内容输出到控制台。

四、受控组件与非受控组件的比较

特性	受控组件	非受控组件
状态管理	由React管理	由组件自身管理
灵活度	较低	较高
复杂度	较高	较低
可控性	更强	较弱
用例	表单、下拉菜单、复选框等	计数器、计时器、滑块等