用 React Hooks 打开你的前端新世界

2023-12-27 17:42:30

React Hooks 是一个改变游戏规则的新工具，它可以让你用更简洁、更具表现力的方式编写 React 代码。使用 Hooks，你不再需要编写冗长的 class 组件，而是可以在函数组件中直接使用 state 和其他 React 特性。

了解 React Hooks

Hooks 本质上是一些特殊的函数，允许你“挂入” React 状态和生命周期。它们以 use 开头，例如 useState、useEffect、useContext 等。

让我们从最常用的 Hook - useState 开始。useState 函数接受一个初始 state 值作为参数，并返回一个数组。数组的第一个元素是当前的 state 值，第二个元素是一个函数，用于更新 state 值。

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

在上面的示例中，我们创建了一个名为 count 的 state 变量，其初始值为 0。我们可以通过调用 setCount 函数来更新 count 的值。

setCount(count + 1);

使用 Hooks 构建交互式组件

现在，让我们使用 Hooks 来创建一个简单的交互式组件。我们将创建一个计数器组件，它允许用户点击按钮来增加或减少计数。

import React, { useState } from "react";

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

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

  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>+</button>
      <button onClick={decrementCount}>-</button>
    </div>
  );
};

export default Counter;