React 状态和生命周期的全面指南

前端

2023-09-15 09:19:59

React 状态和生命周期

在 React 中，状态管理和生命周期对于构建动态、响应式应用程序至关重要。本文深入探讨 React 状态和生命周期的各个方面，提供一个全面的指南，帮助你掌握这些概念。

状态管理

状态是一个 React 组件内部的可变数据，用于存储有关组件的信息。状态通过 this.state 访问，并且只能在组件内部修改。通过管理状态，你可以让组件响应用户交互和外部事件。

生命周期

React 组件的生命周期由一系列方法组成，这些方法会在组件生命周期的特定时间点被调用。这些方法允许你对组件状态进行初始化、操作和清理，从而控制组件的行为。

生命周期方法包括：

constructor() ：在创建组件时被调用，用于初始化组件状态。
shouldComponentUpdate(nextProps, nextState) ：在组件接收新 props 或 state 时被调用，用于确定是否应该更新组件。
render() ：用于渲染组件的 UI。
componentDidMount() ：在组件首次渲染到 DOM 后被调用，用于执行一次性设置或数据获取。
componentDidUpdate(prevProps, prevState) ：在组件更新后被调用，用于响应状态或 props 的更改。
componentWillUnmount() ：在组件从 DOM 中卸载之前被调用，用于清理资源和取消订阅。

实例：自更新时钟组件

为了更好地理解状态和生命周期，让我们考虑一个函数封装的时钟组件 Clock。此组件需要一个每秒更新一次的计时器。为了实现这一点，我们使用状态来存储当前时间，并在 componentDidMount() 生命周期方法中设置一个间隔。

const Clock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(interval);
  }, []);

  return <h1>{time.toLocaleTimeString()}</h1>;
};