React 状态管理库 | 青训营笔记

课堂笔记

本堂课重点内容:

1.react状态库的核心思想

将状态抽离到外部，并进行统一管理。

因为react是单一数据流，当嵌套的子组件中，包含在该模块的层级太深或是有传递给兄弟组件过于频繁，繁琐的区分props，不如进行统一管理。

2.React 状态管理库 - 推荐

• redux

Redux是一个JavaScript库，用于管理应用程序状态并简化状态管理。它遵循单一数据源和纯函数转换状态的理念。

• Xstate

Xstate是一个JavaScript库，用于管理状态机和状态转换。它提供了更丰富的状态管理功能，如状态机和事件处理。

• mobx

MobX是一个JavaScript库，用于简化状态管理和组件间通信。它采用了基于观察者模式的方法来管理状态。

• recoil

Recoil是React库，用于管理共享状态。它提供了一种类似于Redux的状态管理方式，但是更加简单和易用。

3.React 状态管理库 - 状态机

状态机是一种状态管理模式，它将应用程序状态分为不同的状态，并描述了在不同状态之间的转换关系。在 React 中，状态机可以通过使用状态机库来实现。

xstate 和 machina.js 是在React中实现状态机的常见库。他们提供了状态机的基本概念和工具，如状态、事件和转换。使用这些库，可以将应用程序的状态管理更加清晰和可预测。

4.React 状态管理库 - Modern.js/Reduck

Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。

具体案例

这是个简单的累积加减的demo

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

// Define a reducer to handle actions
function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Create a store with the reducer
const store = createStore(reducer);

// Define a React component
function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  function increment() {
    dispatch({ type: 'INCREMENT' });
  }

  function decrement() {
    dispatch({ type: 'DECREMENT' });
  }

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}


// Render the component with the Provider
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

结尾

不足之处，请见谅