了解React的状态管理以及它的类型

HackerNews什么值得看
145 阅读6分钟

前台开发中最复杂的方面是状态管理。状态管理决定了在一个应用程序中如何管理数据。随着新技术的不断涌现，状态管理库也不乏其人， 所以要决定在我们的应用程序中使用哪一个就变得非常混乱了。

在这篇文章中，我将向你介绍一些最流行的状态管理库，我们可以用它们来管理我们应用程序中的状态，并且 告诉你rematch比其他库的优势。

这篇文章是为希望探索状态管理库的前端开发者准备的。我们将探讨不同库的原理和特点。在这篇文章中，我们将讨论其中的一些库，并对它们进行比较，看看哪一个是你下一个react应用的最佳选择。让我们开始吧。

什么是React状态管理？

状态管理是一种在应用程序的各个组件之间通信和共享数据的方式。它提供了一个代表应用程序状态的数据结构，你可以读取和写入。

在react应用程序中，状态是一个JavaScript对象，它是组件的一部分，可以根据事件或用户的操作来改变。你也可以把状态称为一个组件的内存。

React状态管理的不同类型是什么？

1.RECOIL

Recoil 是在2020年初由Facebook团队推出的，自推出以来，它在react社区中获得了很大的知名度。 在Recoil中需要理解的核心概念是 原子 和 选择器。

原子。 它是一个状态单元，包裹并代表一个单一的状态属性。它与 react 本地状态相同，但具有在组件之间共享和在组件之外创建的能力。

  const myState = atom({

   key: "myState", // unique, required key

   default: true, // default value

  });

选择器： 是依赖原子或其他选择器来计算其值的纯函数，当任何依赖关系发生变化时重新计算。它们是可读、可写和异步的。

const statusState = selector({

key: “statusState”,

           get: ({ get }) => {

const myState = get(myState)    // access the value of the atom

            }

           return myState ? “available” : “unavailable”

})

To use atoms and selectors you will need one of recoil hooks, like useRecoilValue or useRecoilState.

// Inside React component

Const [myState, setMyState] = useRecoilState(myState);

Const status = useRecoilValue(statusState);

This atoms and selectors approach makes recoil easy for beginners and powerful enough for advanced users.

2.JATOI

在状态管理的世界里， Jatoi 是另一个值得考虑的库。它与Recoil相似，但具有更简约的API支持、类型化支持和更广泛的文档。

除此以外，性能是Recoil和Jatoi之间最重要的区别。Recoil用字符串键跟踪它的状态，这就是为什么它们是必需的和唯一的；这可能导致你的应用程序的内存泄漏。而Jatoi不需要键值，而是依靠javascript内置的弱点地图来跟踪其原子， 自动优化内存使用并提高性能。

以前的Recoil片段翻译成Jatoi。

Const isAvailableState = atom(true);

Const statusState = ({ get }) => {

Const isAvailable = get(isAvailableState) 

Return isAvailable ? “iAvailable” : “Unavailable”

}

Const [isAvailable, setIsAvailable] = useAtom(isAvailableState);

Const [status] = useAtom(statusState);

Jatoi includes almost all the features of recoil.

3.RedUX

Redux 是一个库，没有它，每一个语句库列表似乎都不完整。虽然Redux受到了很多批评，但它仍然是一个伟大的、成熟的库，用于构建现代解决方案。 Redux架构中的主要组件是 动作 和 还原器。

行动： 描述了应该发生什么。

减速器： 一个函数给出了先前的状态和动作对象，并返回一个新的状态。

Redux 模型已经存在了很长时间，它最大的问题是它的模板。编写多个动作和还原器会导致每个动作的编写都有大量的代码，这很难维护。这就是Redux工具箱出现的地方。

const exampleSlice = createSlice({

  name: "example",

  initialState: {

    isAvailable: true,

  },

  reducers: {

    makeAvailable: (state) => {

      state.isAvailable = true;

    },

    makeUnavailable(state) {

      state.isAvailable = false;

    },

  },

});

const { makeAvailable, makeUnavailable } = exampleSlice.actions;

const exampleReducer = exampleSlice.reducer;

const store = configureStore({

  reducer: { example: exampleReducer },

});

// Inside React components with React-Redux hooks

const isAvailable = useSelector((state) => state.example.isAvailable);

const dispatch = useDispatch();

dispatch(makeAvailable());

dispatch(makeUnavailable());

4.REMATCH

在使用Redux这么久之后，redux的一个替代品值得一提。 Rematch，是Redux的一个更轻、更快、更容易的版本。Rematch是建立在Redux核心之上的，它最大限度地减少了我们对Redux所需的模板代码，并通过async和await引入了简单的副作用处理。所有这些都适合于一个小的捆绑尺寸。

Rematch的核心是模型、还原器和效果，所有这些都被包装成一个实体。这执行了Redux的最佳实践，使状态管理更容易。

const countModel = {

  state: 0,

  reducers: {

    increment(state, payload) {

      return state + payload;

    },

  },

  effects: (dispatch) => ({

    async incrementAsync(payload) {

      await new Promise((resolve) => setTimeout(resolve, 1000));

      dispatch.count.increment(payload);

    },

  }),

};

然后，这些模型可以用来创建具有额外Rematch功能的Redux商店。

const store = init({

  models: {

    count: countModel,

  },

});

const { dispatch } = store;

dispatch({ type: "count/increment", payload: 1 });

dispatch.count.increment(1); // Action shortcut

dispatch({ type: "count/incrementAsync", payload: 1 });

dispatch.count.incrementAsync(1); // Async action shortcut

5.REACT CONTEXT

在有些情况下，你的应用程序没有那么大，增加一个额外的依赖会对 我们的应用程序 造成更大的伤害 ；对于这种情况，React有内置的工具，我们可以使用，就是 State 和 Context APIs。这些对于绝大多数的应用程序来说都是可以做到的。 最好的选择是始终坚持使用基本的和轻量级的，直到你需要更强大的东西。

什么是重配？

Rematch是Redux 的加强版，具有更多的功能，干净的架构和更少的锅炉代码模板。Rematch在与Redux相同的架构上工作，还包括一个持久化器来持久化状态。

Rematch的核心是模型、还原器和效果，所有这些都被包装成一个实体。这执行了Redux的最佳实践，使状态管理更容易。

Rematch的实现

在这个例子中，我们将看到我们如何在react应用中使用Rematch。 首先，我们将创建一个商店，并使用 提供者使该商店在整个应用程序中可用 。

import React from "react";

import ReactDOM from "react-dom";

import { init } from "@rematch/core";

import { Provider } from "react-redux";

import * as models from './models';

import Count from './Count';

// generate Redux store

const store = init({

  models,

});

const Root = () => (

  <Provider store={store}>

    <Count />

  </Provider>

);

ReactDOM.render(<Root />, document.querySelector('#root'));

import React from "react";

import { connect } from "react-redux";

const Count = props => (

  <div>

    <h1>The count is: {props.count}</h1>

    <button onClick={props.addByOne}>Add 1</button>

    <button onClick={props.addOnsync}>Add 1 Async</button>

  </div>

);

const mapState = state => ({

  count: state.count,

});

const mapDispatch = ({ count: { addBy, addAsync }}) => ({

  addByOne: () => addBy(1),

  addOnesync: () => addAsync(1)

});

export default connect(mapState, mapDispatch)(Count);

在下面的代码中，我们正在创建一个Rematch模型计数，它将包含 状态、还原器和效果。

// function to create a one second delay

const delay = (time) => new Promise(resolve => setTimeout(() => resolve(), time));

// count model

export const count = {

  state: 0,

  reducers: {

    addBy(state, payload) {

      return state + payload

    }

  },

  effects: (dispatch) => ({

    async addAsync(payload, state) {

      await delay(1000)

      dispatch.count.addBy(1)

    }

  })

};

React状态管理的优势

  1. 更多的功能。
  2. 为开发者提供一个干净的架构。
  3. 减少了模板。
  4. 包括一个持久化器来持久化数据。
  5. 不需要配置
  6. 内置副作用支持
  7. 支持动态添加还原器。
  8. 允许创建多个存储。

coma

总结

在本教程中，我们了解了关于可用状态管理库的基本知识，以及如何在我们的应用程序中使用它们。我们还看到了如何确定哪个库适合我们的应用需求。之后，我们看到了将它们集成到我们的应用程序的不同方法。

avatar
文章
阅读
粉丝