反应JS |实施状态和生命周期

简介

ReactJS 是一个由 Facebook 推出的 JavaScript 库，旨在构建大型、可组装的 Web 应用程序。其中包含了许多关键的特征，其中之一就是实现了状态和生命周期的管理。这使得开发者可以更加轻松地创建和管理 React 组件。

状态

React 允许您为某个组件定义一个状态。该状态包含了与该组件相关的数据，例如，文本框中键入的数据和复选框选中的状态。状态是可变的，这意味着您可以修改其中的值，而 React 将根据这些值自动完成更新。

定义状态

您可以使用 this.state 定义一个状态，并在组件中使用该状态。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      name: 'John',
      age: 32
    }
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.age}</p>
      </div>
    );
  }
}

更新状态

要更新状态，您可以调用 this.setState() 方法并传递一个包含新值的对象。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      name: 'John',
      age: 32
    }
  }
  
  handleClick() {
    // 更新状态
    this.setState({ age: 33 });
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.age}</p>
        <button onClick={() => this.handleClick()}>生日快乐！</button>
      </div>
    );
  }
}

生命周期

React 组件有一系列的生命周期方法，这些方法允许您在特定的时间点执行代码。这些方法的名称是标准的，并由 React 在相关的时机自动调用。

生命周期的方法可以分为三类。

挂载

当组件第一次加载到 DOM 中时，将调用挂载方法。

• constructor(props) - 构造函数。通常用于初始化状态和绑定事件处理程序。
• render() - 渲染方法。返回用于渲染该组件的 React 元素。
• componentDidMount() - 挂载完成后执行的方法。通常用于进行网络请求、注册事件处理程序等操作。

更新

当组件的 props 或 state 发生变化时，将调用更新方法。

• shouldComponentUpdate(nextProps, nextState) - 决定在更新之前是否要重新渲染组件。如果返回 false，则不会执行 render() 方法。
• componentDidUpdate(prevProps, prevState) - 更新完成后执行的方法。通常用于进行 DOM 操作。

卸载

当组件从 DOM 中删除时，将调用卸载方法。

• componentWillUnmount() - 卸载完成后执行的方法。通常用于取消网络请求、清理事件处理程序等操作。

生命周期示例

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      name: 'John',
      age: 32
    }
  }
  
  componentDidMount() {
    // 挂载完成后网络请求
    fetch('https://api.example.com/user')
      .then(res => res.json())
      .then(data => this.setState({ name: data.name, age: data.age }));
    
    // 注册事件处理程序
    window.addEventListener('resize', this.handleResize);
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    // 只有在年龄不一样时才重新渲染
    return nextState.age !== this.state.age;
  }
  
  componentDidUpdate(prevProps, prevState) {
    // 更新完成后进行 DOM 操作
    const el = document.getElementById('myEl');
    el.style.fontSize = `${this.state.age}px`;
  }
  
  componentWillUnmount() {
    // 卸载完成后取消事件处理程序
    window.removeEventListener('resize', this.handleResize);
    
    // 清理定时器等
    clearTimeout(this.timeout);
  }
  
  handleClick() {
    // 更新状态
    this.setState({ age: 33 });
  }
  
  handleResize() {
    // 事件处理程序
    console.log('Window has been resized');
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p id="myEl">{this.state.age}</p>
        <button onClick={() => this.handleClick()}>生日快乐！</button>
      </div>
    );
  }
}

总结

状态和生命周期是 React 的核心特征之一。通过使用这些功能，您可以更加轻松地构建和管理 React 组件。在开发过程中，请务必牢记这些方法，并根据需要进行使用和修改。通过使用生命周期方法，您可以明确地掌控整个应用程序在不同时间点的状态和操作。