React State状态与生命周期的实现方法

React State状态与生命周期的实现方法

1. State状态

State是React中一种用于存储组件数据的机制。当组件的state发生变化时，React会重新渲染组件。

1.1. 状态设置

在React组件中，可以使用如下语法进行状态设置：

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: true,
      count: 3
    };
  }
}

1.2. 状态更新

更新状态可以使用setState方法，它接受一个对象作为参数。这个对象包含了该组件需要更新的一些状态数据。

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: true,
      count: 3
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      isActive: false,
      count: 6
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me</button>
        <p>isActive: {this.state.isActive.toString()}</p>
        <p>count: {this.state.count}</p>
      </div>
    );
  }
}

2. 生命周期

在React中，生命周期（Lifecycle）是指组件从被创建到被销毁的整个过程。React组件的生命周期由三个阶段组成：挂载阶段、更新阶段和卸载阶段。

2.1. 挂载阶段

组件在挂载阶段被创建并插入到DOM中。React提供了如下生命周期方法：

• constructor
• static getDerivedStateFromProps
• render
• componentDidMount

2.2. 更新阶段

更新阶段发生在组件状态或属性发生变化时。React提供了如下生命周期方法：

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

2.3. 卸载阶段

卸载阶段是组件被销毁的过程。React提供了如下生命周期方法：

• componentWillUnmount

3. 示例说明

3.1. 利用state和生命周期创建计时器组件

class Timer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
      </div>
    );
  }
}

3.2. 利用state和生命周期创建搜索框组件

class SearchBox extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    alert(`Search query: ${this.state.value}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Search:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <button type="submit">Search</button>
      </form>
    );
  }
}