React 状态管理是前端开发中一个非常重要的概念，它涉及到组件如何维护和更新状态。下面是一些关于 React 状态管理的基础知识。

状态管理简介

React 中的状态管理通常指的是如何在不同组件之间共享和传递状态。React 提供了多种状态管理的方式，包括：

  • Props: 通过父组件向子组件传递数据。
  • Context: 在组件树中创建一个上下文，子组件可以通过 contextType 或 useContext 钩子访问。
  • Redux: 一个独立的状态管理库，用于更复杂的状态管理。

React Hooks 的使用

从 React 16.8 版本开始，React 引入了 Hooks，这使得在函数组件中管理状态变得更加容易。以下是一些常用的 Hooks：

  • useState: 用于在函数组件中添加状态。
  • useEffect: 用于执行副作用操作，例如数据获取或订阅。
  • useContext: 用于访问 Context。

示例：使用 useState 管理状态

import React, { 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>
  );
}

扩展阅读

想要了解更多关于 React 状态管理的知识，可以阅读以下文章：

React Hooks