Node.js + React 通力协作：打造从零到一的记账本（九）

2023-10-22 00:19:50

准备好迎接 Node.js 和 React 的强大组合，开启记账本的精彩征程。这一篇章，我们将深入探究 React Hooks，揭开它们在管理状态和生命周期方面的奥秘。从一个简单的 React 组件出发，我们将逐步构建一个健壮、响应式的记账本应用程序。

React Hooks：解构状态管理

在 React 的早期版本中，我们依赖于类组件来管理状态和生命周期。随着 React Hooks 的引入，我们现在可以采用一种更简洁、更函数式的风格。

Hooks 本质上是特殊的函数，让我们在不编写类的情况下，利用 React 的状态和生命周期特性。最常用的 Hooks 之一是 useState，它允许我们定义一个状态变量并返回其当前值和更新函数。另一个重要的 Hook 是 useEffect，它让我们在组件的生命周期中执行副作用，例如在组件挂载或更新时。

记账本应用程序的构建之旅

为了将 React Hooks 的力量付诸实践，我们将着手构建一个记账本应用程序。我们将从一个简单的组件开始，逐步增加功能和复杂性。

1. 创建 React 组件

我们的旅程始于创建第一个 React 组件：ExpenseItem。这个组件将负责显示单笔支出。

import React from 'react';

const ExpenseItem = ({ expense }) => {
  return (
    <li>{expense.name} - ${expense.amount}</li>
  );
};

export default ExpenseItem;

2. 添加状态管理

为了让我们的 ExpenseItem 组件更具动态性，我们使用 useState Hook 引入状态管理。我们定义了一个名为 isEditing 的状态变量，它跟踪该支出是否正在编辑中。

import React, { useState } from 'react';

const ExpenseItem = ({ expense }) => {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <li>
      {isEditing ? <input value={expense.name} onChange={() => {}} /> : expense.name}
      - ${expense.amount}
    </li>
  );
};

export default ExpenseItem;

3. 利用生命周期 Hook

useEffect Hook 使我们能够在组件的生命周期中执行副作用。在本例中，我们使用 useEffect 来设置组件卸载时的清理函数，以避免内存泄漏。

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

const ExpenseItem = ({ expense }) => {
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
    return () => {
      // 清理函数
    };
  }, []);

  return (
    <li>
      {isEditing ? <input value={expense.name} onChange={() => {}} /> : expense.name}
      - ${expense.amount}
    </li>
  );
};

export default ExpenseItem;