从0开始学前端第四十八课：组件的内部状态（State）与生命周期

本文链接：https://blog.youkuaiyun.com/weixin_44738632/article/details/135848252

本文详细讲解了React组件中的State概念、生命周期各个阶段（构造器、挂载、更新、卸载）以及如何在实践中应用。通过实例，学习者将学会创建状态控制的LightSwitch组件，以及如何结合生命周期方法处理状态变化和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第四十八课：组件的内部状态（State）与生命周期

学习目标

在这节课中，我们将深入学习React组件的State（状态）和生命周期，确保你能：

了解和描述State的概念及其在React组件中的重要性。
熟悉React类组件的所有生命周期阶段及其方法。
掌握如何在组件中正确使用State和生命周期方法。
应用State和生命周期方法处理常见的前端逻辑。

学习内容

1. State的概念

概念: State表示组件的内部状态，它是组件的私有属性，可以在组件生命周期内部进行更新。当组件的State改变时，组件会进行重新渲染。
使用State:
- 初始化State
- 通过this.setState更新State
- State的不可变性

代码示例:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = { count: 0 };
  }

  incrementCount = () => {
    // 更新state
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

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

预计输出: 页面上显示一个按钮和按钮旁边的计数器，每次点击按钮，计数器的值会增加。

2. 生命周期的基础与使用场景

生命周期方法:
- 初始化阶段:
  - constructor(props): 创建组件时调用。
- 挂载阶段:
  - componentDidMount(): 组件挂载到DOM后调用，适合设置定时器、发送网络请求等操作。
- 更新阶段:
  - shouldComponentUpdate(nextProps, nextState): 组件更新前调用，决定组件是否重新渲染。
  - componentDidUpdate(prevProps, prevState): 组件更新后调用，适合执行DOM操作或者执行更多的网络请求。
- 卸载阶段:
  - componentWillUnmount(): 组件卸载前调用，适合执行清理任务，如清除定时器、取消网络请求等。

代码示例:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userData: null };
  }

  componentDidMount() {
    // 模拟网络请求获取用户数据
    this.fetchUserData(this.props.userId);
  }

  componentDidUpdate(prevProps) {
    // 当传入的userId更新时，重新获取用户数据
    if (this.props.userId !== prevProps.userId) {
      this.fetchUserData(this.props.userId);
    }
  }

  componentWillUnmount() {
    // 清理工作，比如取消未完成的请求
  }

  fetchUserData(userId) {
    // 假设这是一个获取用户数据的异步操作
    // ...
    // 假设请求完成后调用this.setState更新userData
    // this.setState({ userData: fetchedData });
  }

  render() {
    // 渲染用户数据或者加载中的UI
  }
}

课后练习

State实践: 创建一个LightSwitch组件，包含一个按钮，用来切换灯的开/关状态，并显示当前状态。
生命周期实践: 修改LightSwitch组件，使得在组件挂载时记录挂载时间，并在组件卸载时打印在页面上存在的总时间。
综合应用: 在LightSwitch组件中添加一个按钮，点击时更新页面背景色，同时确保在组件卸载时背景色能够重置。

练习解析

State实践:

class LightSwitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = { lightOn: false };
  }

  toggleLight = () => {
    this.setState(prevState => ({
      lightOn: !prevState.lightOn
    }));
  };

  render() {
    return (
      <div>
        <p>The light is {this.state.lightOn ? 'On' : 'Off'}</p>
        <button onClick={this.toggleLight}>
          {this.state.lightOn ? 'Turn Off' : 'Turn On'}
        </button>
      </div>
    );
  }
}

生命周期实践:

componentDidMount() {
  this.mountTime = Date.now();
}

componentWillUnmount() {
  const duration = Date.now() - this.mountTime;
  console.log(`The component was on the page for ${duration} milliseconds.`);
}

综合应用:

// 添加在render中
<button onClick={this.changeBackground}>Change Background</button>

// 添加方法
changeBackground = () => {
  document.body.style.backgroundColor = this.state.lightOn ? 'white' : 'black';
};

// 修改componentWillUnmount
componentWillUnmount() {
  document.body.style.backgroundColor = 'white';
}

这些练习将帮助你理解如何在实际应用中使用State和生命周期方法，以及它们在前端开发中的实际意义。

章节目录
 第四十九课：React事件处理