React 组件状态 State

React 组件的状态（State）是一种数据结构，它包含了影响组件渲染输出或组件交互行为的属性。React 组件的状态可以在其生命周期中更新，并且更新时不会影响其他实例的状态。

在类组件中，你可以通过 this.state 访问状态，并通过 this.setState() 方法更新状态。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({ clicked: !prevState.clicked }));
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.clicked ? 'Clicked!' : 'Click Me'}
      </button>
    );
  }
}

在函数组件中，你可以使用 useState Hook 来使用状态。

import React, { useState } from 'react';
 
function Button() {
  const [clicked, setClicked] = useState(false);
 
  function handleClick() {
    setClicked(clicked => !clicked);
  }
 
  return (
    <button onClick={handleClick}>
      {clicked ? 'Clicked!' : 'Click Me'}
    </button>
  );
}

这两个例子展示了如何在用户点击按钮后更新按钮文本的状态。函数组件使用 Hooks 来管理状态，而类组件使用构造器和 this.setState 方法。