组件js

// 函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

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

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

// 使用组件
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Counter />
    </div>
  );
}

// 使用Context API示例
const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = { theme: 'light' };

  toggleTheme = () => {
    this.setState(state => ({ theme: state.theme === 'light' ? 'dark' : 'light' }));
  };

  render() {
    return (
      <ThemeContext.Provider value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <button className={theme} onClick={toggleTheme}>
          I am styled by theme context!
        </button>
      )}
    </ThemeContext.Consumer>
  );
}