受控组件课程：React入门必备教程-原创手记-慕课网

概述

本文详细介绍了受控组件课程，解释了受控组件的概念和作用，探讨了受控组件与非受控组件的区别，并提供了多个示例来说明如何创建和使用受控组件。

受控组件简介

什么是受控组件

在React中，受控组件是指将表单元素的值绑定到组件状态的组件。这意味着React组件负责统一管理表单元素的状态，而不是由DOM直接管理。当用户操作表单元素时，组件会更新其状态，从而保持表单元素的值与组件状态同步。

受控组件的作用

受控组件的主要作用是实现表单的响应式更新和数据绑定。通过将表单元素的值绑定到组件状态中，React能够方便地跟踪表单的输入变化，并根据这些变化进行相应的逻辑处理。这在需要验证表单输入、处理表单提交等场景中尤其有用。

受控组件与非受控组件的区别

在React中，除了受控组件之外，还存在非受控组件。非受控组件是指那些不将表单元素的值绑定到组件状态中的组件。非受控组件通过表单元素的原生属性来获取值，而不是通过组件状态。

受控组件和非受控组件的主要区别在于：

状态管理：
- 受控组件通过组件状态来管理表单元素的值。
- 非受控组件通过表单元素的原生属性来获取值。
事件处理：
- 受控组件需要监听输入事件（如onChange）来更新状态。
- 非受控组件可以通过ref属性直接访问表单元素，并在需要时获取其值。

以下是创建一个非受控组件的示例：

import React from 'react';

class NonControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  getValue = () => {
    console.log(this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.getValue}>get value</button>
      </div>
    );
  }
}

export default NonControlledInput;

React基础概念

React组件介绍

React组件是React应用的基本构建块。组件可以被视为具有特定功能的小型、独立模块，这些功能可以包括渲染用户界面、响应用户输入等。组件可以是纯渲染组件（仅返回UI），也可以是带有状态和生命周期方法的类组件。React组件的类型包括函数组件和类组件。

函数组件

函数组件是最简单的组件，它接收一个props对象作为参数，并返回React元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

类组件

类组件使用React.Component类作为基类，并继承其方法。类组件可以有状态（state）和生命周期方法。

import React from 'react';

class WelcomeMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Welcome to React!'
    };
  }

  render() {
    return <h1>{this.state.message}</h1>;
  }
}

export default WelcomeMessage;

状态（State）与属性（Props）

状态（State）

状态是组件内部的数据，可以随着组件的生命周期发生变化。状态只能通过setState方法来更新，不能直接修改。

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

属性（Props）

属性是父组件传递给子组件的数据。属性是只读的，不能直接修改，只能通过父组件传递新的属性值来更新。

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Greeting;
``

在父组件中使用：

```jsx
<Greeting name="React" />

如何创建一个简单的React组件

函数组件

import React from 'react';

function SimpleComponent() {
  return <h1>Hello, World!</h1>;
}

export default SimpleComponent;

类组件

import React from 'react';

class SimpleComponent extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default SimpleComponent;

创建受控组件

实例：输入框受控组件的实现

输入框受控组件将输入框的值绑定到组件状态中，从而由React统一管理输入框的值。

import React from 'react';

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <p>You typed: {this.state.value}</p>
      </div>
    );
  }
}

export default ControlledInput;

使用表单元素构建受控组件

表单元素（如<input>、<textarea>、<select>等）也可以被构建为受控组件。这些表单元素的值通过value属性绑定到组件状态，并通过onChange事件处理方法更新状态。

import React from 'react';

class ControlledForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <p>You typed: {this.state.value}</p>
      </form>
    );
  }
}

export default ControlledForm;

受控组件的状态管理

受控组件的状态管理通常通过组件的状态（state）来实现。状态最初在组件的构造函数中设置，通过setState方法来更新状态。

import React from 'react';

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

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

export default ControlledComponent;

受控组件的应用场景

文本输入的受控组件

文本输入的受控组件用于管理文本输入框中的值，当用户输入文本时，组件状态会相应更新。

import React from 'react';

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

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

export default TextInput;

下拉菜单的受控组件

下拉菜单的受控组件用于管理下拉菜单的选中值，当用户选择一个选项时，组件状态会相应更新。

import React from 'react';

class Dropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ selectedOption: event.target.value });
  }

  render() {
    return (
      <div>
        <select value={this.state.selectedOption} onChange={this.handleChange}>
          <option value="">Select an option</option>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
        <p>Selected option: {this.state.selectedOption}</p>
      </div>
    );
  }
}

export default Dropdown;

复选框和单选按钮的受控组件

复选框和单选按钮的受控组件用于管理这些输入元素的状态，当用户选择或取消选择时，组件状态会相应更新。

import React from 'react';

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ checked: event.target.checked });
  }

  render() {
    return (
      <div>
        <label>
          <input
            type="checkbox"
            checked={this.state.checked}
            onChange={this.handleChange}
          />
          {this.state.checked ? 'Checked' : 'Unchecked'}
        </label>
      </div>
    );
  }
}

export default Checkbox;

解决常见问题

如何处理受控组件中的输入事件

受控组件中的输入事件（如onChange）可以通过绑定事件处理方法来处理。当事件触发时，事件处理方法会更新组件的状态，从而保持表单元素的值与组件状态同步。

import React from 'react';

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>You typed: {this.state.value}</p>
      </div>
    );
  }
}

export default ControlledInput;

避免受控组件中的常见错误

忘记更新状态：确保在处理输入事件时调用setState方法来更新状态。
直接修改状态：不要直接修改状态，始终使用setState方法。
状态错误更新：确保setState方法正确更新状态，并避免不必要的状态更新。
忘记绑定事件处理方法：确保事件处理方法被正确绑定，以避免this上下文问题。

import React from 'react';

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    // 使用箭头函数绑定事件处理方法
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>You typed: {this.state.value}</p>
      </div>
    );
  }
}

export default TextInput;

受控组件性能优化技巧

使用useCallback优化事件处理方法：在函数组件中，可以使用useCallback来优化事件处理方法的性能。

import React, { useCallback } from 'react';

function ControlledInput() {
  const [value, setValue] = React.useState('');

  const handleChange = useCallback((event) => {
    setValue(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
}

export default ControlledInput;

减少不必要的状态更新：避免不必要的状态更新，确保setState方法仅在需要时才调用。

import React from 'react';

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const newValue = event.target.value;
    if (newValue !== this.state.value) {
      this.setState({ value: newValue });
    }
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>You typed: {this.state.value}</p>
      </div>
    );
  }
}

export default ControlledInput;

实战演练

完整案例：构建一个受控表单

构建一个完整的受控表单，包括输入框、复选框和下拉菜单。

import React from 'react';

class ControlledForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      subscribed: false,
      gender: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  render() {
    return (
      <form>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <br />
        <label>
          Gender:
          <select value={this.state.gender} name="gender" onChange={this.handleChange}>
            <option value="">Select gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </label>
        <br />
        <label>
          Subscribe:
          <input type="checkbox" name="subscribed" checked={this.state.subscribed} onChange={this.handleChange} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default ControlledForm;

检查和调试受控组件

调试受控组件时，可以通过查看组件的状态来检查输入值的变化。例如，在控制台中打印状态，或者使用React DevTools来检查组件的状态。

import React from 'react';

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
    console.log('Input value: ', event.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <p>You typed: {this.state.value}</p>
      </div>
    );
  }
}

export default ControlledInput;

与其他React组件集成

受控组件可以与React中的其他组件集成，如表单、按钮、列表等。例如，可以将受控组件嵌入到一个更大的表单组件中，或者在父组件中传入属性。

import React from 'react';
import ControlledInput from './ControlledInput';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ControlledInput />
      </div>
    );
  }
}

export default ParentComponent;