学习笔记──React──状态管理

1. 状态管理的基本概念

在 React 中，状态（state）是指影响组件渲染的数据。状态可以是组件本地的（本地状态）或全局的（应用状态）。管理这些状态的方法有很多，从 React 内置的状态管理到第三方库。

2. React 内置状态管理

2.1 本地状态

本地状态是组件内部的状态，使用 useState 钩子（函数组件）或 this.state 和 this.setState 方法（类组件）管理。

函数组件：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

类组件：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

2.2 上下文（Context）

上下文用于在组件树中传递数据，而不必通过组件层层传递 props。适用于全局状态的管理。

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

3. 第三方状态管理库

对于大型应用或复杂状态逻辑，React 内置的状态管理可能不够用。以下是一些常用的第三方状态管理库：

3.1 Redux

Redux 是一个流行的状态管理库，使用单一状态树和纯函数来管理应用状态。它非常适合大型应用和复杂状态逻辑。

安装 Redux：

npm install redux react-redux

使用 Redux：

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// 定义 action 类型
const INCREMENT = 'INCREMENT';

// 定义 action 创建函数
const increment = () => ({ type: INCREMENT });

// 定义 reducer
const counter = (state = { count: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    default:
      return state;
  }
};

// 创建 store
const store = createStore(counter);

function Counter() {
  const dispatch = useDispatch();
  const count = useSelector((state) => state.count);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

3.2 MobX

MobX 是一个简单、可扩展的状态管理库，基于观察者模式。

安装 MobX：

npm install mobx mobx-react-lite

使用 MobX：

import React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';

// 定义状态
const counter = observable({
  count: 0,
  increment() {
    this.count++;
  },
});

const Counter = observer(() => (
  <div>
    <p>{counter.count}</p>
    <button onClick={() => counter.increment()}>Increment</button>
  </div>
));

function App() {
  return <Counter />;
}

*** 本文仅是学习中的记录，有错误请指正。 ***