React学习3（组件实例三大核心之state）

import React from 'react';
import ReactDOM from 'react-dom';
 
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
 
    // 绑定方法，否则this会指向错误的对象
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick() {
    this.setState(prevState => ({
      liked: !prevState.liked
    }));
  }
 
  render() {
    const text = this.state.liked ? '喜欢' : '点击喜欢';
    return (
      <button onClick={this.handleClick}>
        {text}
      </button>
    );
  }
}
 
const rootElement = document.getElementById('root');
ReactDOM.render(<LikeButton />, rootElement);

这段代码展示了如何在React组件中使用state来控制按钮的文本。组件的状态被定义在构造器中，并通过this.state属性访问。handleClick方法通过this.setState更新状态，导致组件重新渲染，显示新的文本内容。这个例子简单而又直接地展示了React中state的使用方法。