React 函数式组件和 Hooks：高效、可重用且状态管理的秘密武器

前端

2024-01-28 19:53:14

React 函数式组件：拥抱声明式 UI

React 函数式组件代表了构建 React UI 的一种简约而强大的方式。它们通过接收 props（属性）并返回一个 UI 的 React 元素，从而将 UI 逻辑与状态管理分离开来。这种声明式方法使代码更容易阅读、维护和测试。

Hooks：状态管理的革命

React Hooks 进一步提升了函数式组件，引入了强大的工具来管理状态。与传统类组件中复杂的生命周期方法不同，Hooks 允许我们直接从函数组件访问和修改状态。这极大地简化了状态管理，并使代码更易于理解。

最常用的 Hooks 包括：

useState： 管理组件状态
useEffect： 处理副作用，例如数据获取和订阅
useContext： 从 React 上下文访问数据
useReducer： 使用 reducer 函数管理复杂状态

示例：构建一个可重用的计数器组件

为了展示函数式组件和 Hooks 的力量，让我们构建一个可重用的计数器组件：

import React, { useState } from "react";

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

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;