React：可变对象再创新

2024-02-22 18:04:06

可变对象与不可变对象

在计算机科学中，可变对象是指可以改变其状态的对象，而不可变对象是指不能改变其状态的对象。在 React 中，状态是指组件的属性和内部变量。

可变对象在 React 中的使用非常普遍，因为它们更容易理解和使用。例如，以下代码使用可变对象来更新组件的状态：

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

  handleClick() {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

这段代码中的 state 对象是一个可变对象，当用户点击按钮时，handleClick 方法会调用 setState 方法来更新 state 对象中的 count 属性。

不可变对象在 React 中的使用相对较少，因为它们更难理解和使用。例如，以下代码使用不可变对象来更新组件的状态：

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

  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}