WHAT - React 学习系列- Managing state

React 管理状态是一个重要的部分，它允许你在不同的组件之间共享信息。在这个教程中，我们将讨论如何在React中管理状态。

1. 使用React State

React 组件的状态是内部管理的，并且只能通过组件内部的方法来更新。你可以通过调用 this.setState() 方法来更新状态。

class ExampleComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 0,
    };
  }
 
  increment = () => {
    this.setState({ value: this.state.value + 1 });
  }
 
  render() {
    return (
      <div>
        <button onClick={this.increment}>Increment</button>
        <p>Value: {this.state.value}</p>
      </div>
    );
  }
}

2. 使用React Props

如果你需要在多个组件之间共享状态，你可以使用 React 的组件属性（props）。你可以通过父组件来更新子组件的属性，并通过一个回调函数来实现。

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 0,
    };
  }
 
  increment = () => {
    this.setState({ value: this.state.value + 1 });
  }
 
  render() {
    return (
      <div>
        <ChildComponent value={this.state.value} onIncrement={this.increment} />
      </div>
    );
  }
}
 
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onIncrement}>Increment</button>
        <p>Value: {this.props.value}</p>
      </div>
    );
  }
}

3. 使用Context API

Context API 允许你在组件树的任何地方传递数据，而不需要显式地通过组件层级的每一层手动传递props。

const ThemeContext = React.createContext();
 
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      theme: 'light',
    };
  }
 
  toggleTheme = () => {
    this.setState(prevState => ({
      theme: prevState.theme === 'light' ? 'dark' : 'light'
    }));
  }
 
  render() {
    return (
      <ThemeContext.Provider value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
 
function Toolbar(props) {
  return (
    <ThemeContext.Consumer>
      {context => (
        <div>
          <button onClick={context.toggleTheme}>Toggle Theme</button>
          <p>Theme: {context.theme}</p>
        </div>
      )}
    </ThemeConte