React Hooks 学习笔记：入门指南与实践案例

2023-11-04 00:36:07

React Hooks 入门指南

在您开始使用 React Hooks 之前，您需要先了解一些基本概念。

函数组件: 函数组件是使用 JavaScript 函数定义的组件。它们没有状态或生命周期方法。
状态: 状态是组件的数据。它可以随着时间的推移而改变。
钩子: 钩子是 React 中的一组特殊函数，允许您在函数组件中使用状态和生命周期方法。

您可以使用 useState 钩子来创建状态。useState 钩子接受一个初始状态值，并返回一个数组。数组的第一个元素是当前的状态值，数组的第二个元素是一个函数，用于更新状态。

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

您可以使用 useEffect 钩子来创建生命周期方法。useEffect 钩子接受两个参数：一个函数和一个依赖项数组。函数将在组件挂载、更新和卸载时执行。依赖项数组指定了函数何时应该执行。

useEffect(() => {
  console.log("组件已挂载");
}, []);

React Hooks 实践案例

现在我们已经了解了 React Hooks 的一些基本概念，让我们来看一个实际案例。

假设我们想创建一个计数器组件。我们可以使用 useState 钩子来创建计数器状态，并使用 useEffect 钩子来在组件挂载时将计数器值输出到控制台。

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

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

  useEffect(() => {
    console.log("组件已挂载");
  }, []);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>计数器: {count}</h1>
      <button onClick={handleClick}>增加</button>
    </div>
  );
};

export default Counter;