日状态和生命周期方法 - ReactJS-js教程-PHP中文网

日状态和生命周期方法 - ReactJS

WBOY

发布： 2024-09-03 15:43:02

原创

476 人浏览过

Day State and Lifecycle Methods - ReactJS

欢迎来到“ReactJS 30 天”挑战的第五天！今天，我们将探讨 React 中的两个基本概念：状态和生命周期方法。了解这些将使您能够创建动态的交互式应用程序。

什么是状态？

React 中的

State 指的是一个内置对象，它保存的信息可能会在组件的生命周期内发生变化。与只读并从父组件传递下来的 props 不同，state 是组件本地的并且可以在内部修改。

将状态想象成黑板。您可以根据需要在其上写入和擦除信息，从而使您的组件能够适应变化，例如用户输入或数据获取。

示例：计数器组件

让我们创建一个简单的计数器组件，当单击按钮时它会增加计数：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

登录后复制

这里，useState 是一个 React hook，允许你向功能组件添加状态。 count 变量保存当前状态，setCount 是更新它的函数。

什么是生命周期方法？

生命周期方法是React类组件中的特殊方法，允许您在组件生命周期的特定点运行代码。这个生命周期包括挂载（添加到 DOM）、更新（重新渲染）和卸载（从 DOM 中删除）。

尽管随着 React hooks 的引入，类组件变得越来越不常见，但理解生命周期方法仍然很重要，特别是在使用较旧的代码库时。

示例：componentDidMount

常见的生命周期方法是 componentDidMount，它在组件首次渲染后运行。它通常用于初始化数据，例如从 API 获取数据：

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

登录后复制

在此示例中，一旦组件添加到 DOM，componentDidMount 就会获取数据，并使用获取的数据更新状态。

现实生活示例：餐厅订单
想象一下在餐厅下订单（组件安装）。您下订单后，厨房就开始准备食物 (componentDidMount)。当食物正在准备（更新）时，您可能会收到状态更新。最后，食物端上来，您吃完饭（组件卸载）。

Vite 的状态和生命周期

由于我们使用 Vite 作为开发环境，因此设置状态和生命周期方法是无缝的。 Vite 的快速开发服务器可确保您的状态更改和生命周期方法在开发过程中几乎立即得到反映。

以下是如何构建项目以包含状态和生命周期方法：