第一章：React 核心概念

状态 (State) 和生命周期

1. 什么是状态 (State)？

状态（State）是 React 组件中用于存储和管理动态数据的机制。与 Props 不同，State 是组件内部私有的，并且可以通过 setState 方法进行更新，从而触发组件的重新渲染。

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>当前计数: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          增加
        </button>
      </div>
    );
  }
}

2. 生命周期方法

React 类组件提供了一系列生命周期方法，允许开发者在组件的不同阶段执行代码。以下是常见的生命周期方法：

  • 挂载阶段：

    • constructor()：初始化状态和绑定方法。
    • render()：渲染组件。
    • componentDidMount()：组件挂载后调用，适合发起网络请求或订阅事件。

  • 更新阶段：

    • shouldComponentUpdate(nextProps, nextState)：决定组件是否需要重新渲染。
    • componentDidUpdate(prevProps, prevState)：组件更新后调用，适合处理 DOM 或网络请求。

  • 卸载阶段：

    • componentWillUnmount()：组件卸载前调用，适合清理定时器或取消订阅。
class Example extends Component {
  componentDidMount() {
    console.log('组件已挂载');
  }

  componentDidUpdate(prevProps) {
    if (this.props.value !== prevProps.value) {
      console.log('props 发生变化');
    }
  }

  componentWillUnmount() {
    console.log('组件即将卸载');
  }
}

3. 状态更新与异步性

setState 是异步的，React 会将多个 setState 调用合并为一次更新以提高性能。如果需要基于前一个状态更新，可以使用函数形式：

this.setState((prevState) => ({
  count: prevState.count + 1
}));

4. 函数组件中的状态和生命周期

在函数组件中，可以使用 useState 和 useEffect Hooks 来替代类组件的状态和生命周期方法。

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('组件挂载或更新');
    return () => {
      console.log('组件卸载');
    };
  }, [count]);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

5. 最佳实践

  • 避免直接修改状态：始终使用 setState 或 Hook 的更新函数。
  • 合理使用生命周期方法：避免在 render 中执行副作用操作。
  • 性能优化：通过 shouldComponentUpdate 或 React.memo 减少不必要的渲染。

通过掌握状态和生命周期，你可以构建更动态和高效的 React 应用！

Last Updated::