搜索

聊聊两个状态管理库 Redux & Recoil

脑洞前端

共 8867字，需浏览 18分钟

 ·

2020-12-03 11:23

State Management in React Apps

背景

React 是一个十分优秀的UI库， 最初的时候， React 只专注于UI层， 对全局状态管理并没有很好的解决方案， 也因此催生出类似Redux 这样优秀的状态管理工库。

随着时间的演变， 又催化了一批新的状态管理工具。

我简单整理了一些目前主流的：

  1. Redux
  2. React Context & useReducer
  3. Mobx
  4. Recoil
  5. react-sweet-state
  6. hox

这几个都是我接触过的，Npm 上的现状和趋势对比：


毫无疑问，React 和 Redux 的组合是目前的主流。

今天5月份， 一个名叫 Recoil.js 的新成员进入了我的视野，带来了一些有趣的模型和概念，今天我们就把它和 Redux 做一个简单的对比， 希望能对大家有所启发。

正文

先看 Redux:

Redux

React-Redux 架构图：


这个模型还是比较简单的， 大家也都很熟悉。

先用一个简单的例子，回顾一下整个模型:

actions.js

export const UPDATE_LIST_NAME = 'UPDATE_NAME';

reducers.js

export const reducer = (state = initialState, action) => {    const { listName, tasks } = state;    switch (action.type) {        case 'UPDATE_NAME': {            // ...        }        	default: {            return state;        }    }};

store.js

import reducers from '../reducers';import { createStore } from 'redux';const store = createStore(reducers);export const TasksProvider = ({ children }) => (           {children}    )；

App.js

import { TasksProvider } from './store';import Tasks from './tasks';const ReduxApp = () => (              );

Component

// componentsimport React from 'react';import { updateListName } from './actions';import TasksView from './TasksView';
const Tasks = (props) => {    const { tasks } = props;    return (            );};
const mapStateToProps = (state) => ({  tasks: state.tasks});
const mapDispatchToProps = (dispatch) => ({    updateTasks: (tasks) => dispatch(updateTasks(tasks))});
export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

当然也可以不用connect, react-redux 提供了 useDispatch, useSelector 两个hook, 也很方便。

import { useDispatch, useSelector } from 'react-redux';const Tasks = () => {    const dispatch = useDispatch();    const name = useSelector(state => state.name);    const setName = (name) => dispatch({ type: 'updateName', payload: { name } });    return (            );};


整个模型并不复杂，而且redux 还推出了工具集redux toolkit,使用它提供的createSlice方法去简化一些操作， 举个例子：

// Actionexport const UPDATE_LIST_NAME = 'UPDATE_LIST_NAME';
// Action creatorexport const updateListName = (name) => ({    type: UPDATE_LIST_NAME,    payload: { name }});
// Reducerconst reducer = (state = 'My to-do list', action) => {    switch (action.type) {        case UPDATE_LIST_NAME: {            const { name } = action.payload;            return name;        }
        default: {            return state;        }    }};
export default reducer;

使用 createSlice：

// src/redux-toolkit/state/reducers/list-nameimport { createSlice } from '@reduxjs/toolkit';
const listNameSlice = createSlice({    name: 'listName',    initialState: 'todo-list',    reducers: {        updateListName: (state, action) => {            const { name } = action.payload;            return name;        }    }});
export const {    actions: { updateListName },} = listNameSlice;
export default listNameSlice.reducer;

通过createSlice, 可以减少一些不必要的代码， 提升开发体验。

尽管如此， Redux 还有有一些天然的缺陷：

  1. 概念比较多，心智负担大。
  2. 属性要一个一个 pick，计算属性要依赖 reselect。还有魔法字符串等一系列问题，用起来很麻烦容易出错，开发效率低。
  3. 触发更新的效率也比较差。对于connect到store的组件，必须一个一个遍历，组件再去做比较，拦截不必要的更新， 这在注重性能或者在大型应用里， 无疑是灾难。

对于这个情况， React 本身也提供了解决方案， 就是我们熟知的 Context.



  {value => /* render something based on the context value */}

给父节点加 Provider 在子节点加 Consumer，不过每多加一个 item 就要多一层 Provider, 越加越多：


而且，使用Context 问题也不少。

对于使用 useContext 的组件，最突出的就是问题就是 re-render.

不过也有对应的优化方案: React-tracked.

稍微举个例子：

// store.jsimport React, { useReducer } from 'react';import { createContainer } from 'react-tracked';import { reducers } from './reducers';
const useValue = ({ reducers, initialState }) => useReducer(reducer, initialState);const { Provider, useTracked, useTrackedState, useUpdate } = createContainer(useValue);
export const TasksProvider = ({ children, initialState }) => (            {children}    );
export { useTracked, useTrackedState, useUpdate };

对应的，也有 hooks 版本：

const [state, dispatch] = useTracked();const dispatch = useUpdate();const state = useTrackedState();
// ...

Recoil

Recoil.js 提供了另外一种思路, 它的模型是这样的：


在 React tree 上创建另一个正交的 tree，把每片 item 的 state 抽出来。

每个 component 都有对应单独的一片 state，当数据更新的时候对应的组件也会更新。

Recoil 把 这每一片的数据称为 Atom，Atom 是可订阅可变的 state 单元。

这么说可能有点抽象， 看个简单的例子吧：

// index.js

import React from "react";import ReactDOM from "react-dom";import { RecoilRoot } from "recoil";import "./index.css";import App from "./App";import * as serviceWorker from "./serviceWorker";
ReactDOM.render(                  ,  document.getElementById("root"));

Recoil Root

Provides the context in which atoms have values. Must be an ancestor of any component that uses any Recoil hooks. Multiple roots may co-exist; atoms will have distinct values within each root. If they are nested, the innermost root will completely mask any outer roots.

可以把 RecoilRoot 看成顶层的 Provider.

Atoms

假设， 现在要实现一个counter:


先用 useState 实现：

import React, { useState } from "react";
const App = () => {  const [count, setCount] = useState(0);  return (    
                  
Count is {count}
    
  );};
export default App;

再用 atom 改写一下：

import React from "react";import { atom, useRecoilState } from "recoil";
const countState = atom({  key: "counter",  default: 0,});
const App = () => {  const [count, setCount] = useRecoilState(countState);    return (    
                  
Count is {count}
    
  );};
export default App;

看到这， 你可能对atom 有一个初步的认识了。

那 atom 具体是个什么概念呢？

Atom

简单理解一下，atom 是包含了一份数据的集合，这个集合是可共享，可修改的。

组件可以订阅atom, 可以是一个， 也可以是多个，当 atom 发生改变时，触发再次渲染。

const someState = atom({    key: 'uniqueString',    default: [],});

每个atom 有两个参数：

  • key：用于内部识别atom的字符串。相对于整个应用程序中的其他原子和选择器，该字符串应该是唯一的。
  • default：atom的初始值。

atom 是存储状态的最小单位， 一种合理的设计是， atom 尽量小， 保持最大的灵活性。

Recoil 的作者， 在 ReactEurope video 中也介绍了以后一种封装定atom 的方法：

export const itemWithId =    memoize(id => atom({        key: `item${id}`,        default: {...},    }));

Selectors

官方描述：

“A selector is a pure function that accepts atoms or other selectors as input. When these upstream atoms or selectors are updated, the selector function will be re-evaluated.”

selector 是以 atom 为参数的纯函数， 当atom 改变时， 会触发重新计算。

selector 有如下参数：

  • key：用于内部识别 atom 的字符串。相对于整个应用程序中的其他原子和选择器，该字符串应该是唯一的.
  • get：作为对象传递的函数{ get }，其中get是从其他案atom或selector检索值的函数。传递给此函数的所有atom或selector都将隐式添加到selector的依赖项列表中。
  • set?：返回新的可写状态的可选函数。它作为一个对象{ get, set }和一个新值传递。get是从其他atom或selector检索值的函数。set是设置原子值的函数，其中第一个参数是原子名称，第二个参数是新值。

看个具体的例子：

import React from "react";import { atom, selector, useRecoilState, useRecoilValue } from "recoil";
const countState = atom({  key: "myCount",  default: 0,});
const doubleCountState = selector({  key: "myDoubleCount",  get: ({ get }) => get(countState) * 2,});
const inputState = selector({  key: "inputCount",  get: ({ get }) => get(doubleCountState),  set: ({ set }, newValue) => set(countState, newValue),});
const App = () => {  const [count, setCount] = useRecoilState(countState);  const doubleCount = useRecoilValue(doubleCountState);  const [input, setInput] = useRecoilState(inputState);    return (    
                   setInput(Number(e.target.value))} />      
Count is {count}
      
Double count is {doubleCount}
    
  );};
export default App;

比较好理解， useRecoilState， useRecoilValue 这些基础概念可以参考官方文档。

另外， selector 还可以做异步, 比如：

  get: async ({ get }) => {    const countStateValue = get(countState);    const response = await new Promise(      (resolve) => setTimeout(() => resolve(countStateValue * 2)),      1000    );    return response;  }

不过对于异步的selector, 需要在RecoilRoot加一层Suspense:

ReactDOM.render(            Loading...
}> , document.getElementById("root"));

Redux vs Recoil

模型对比：


Recoil 推荐 atom 足够小， 这样每一个叶子组件可以单独去订阅， 数据变化时， 可以达到 O(1)级别的更新.

Recoil 作者 Dave McCabe 在一个评论中提到：

Well, I know that on one tool we saw a 20x or so speedup compared to using Redux. This is because Redux is O(n) in that it has to ask each connected component whether it needs to re-render, whereas we can be O(1).

useReducer is equivalent to useState in that it works on a particular component and all of its descendants, rather than being orthogonal to the React tree.

Rocil 可以做到 O(1) 的更新是因为，当atom数据变化时，只有订阅了这个 atom 的组件需要re-render。

不过， 在Redux 中，我们也可以用selector 实现同样的效果：

// selectorconst taskSelector = (id) => state.tasks[id];
// component codeconst task = useSelector(taskSelector(id));

不过这里的一个小问题是，state变化时，taskSelector 也会重新计算， 不过我们可以用createSelector 去优化， 比如：

import { createSelector } from 'reselect';
const shopItemsSelector = state => state.shop.items;
const subtotalSelector = createSelector(  shopItemsSelector,  items => items.reduce((acc, item) => acc + item.value, 0))

写到这里， 是不是想说，就这？扯了这么多， Rocoil 能做的， Redux 也能做， 那要你何用？

哈哈， 这个确实有点尴尬。

不过我认为，这是一种模式上的改变，recoil 鼓励把每一个状态做的足够小， 任意组合，最小范围的更新。

而redux, 我们的习惯是， 把容器组件连接到store上， 至于子组件，哪怕往下传一层，也没什么所谓。

我想，Recoil 这么设计，可能是十分注重性能问题，优化超大应用的性能表现。

目前，recoil 还处于玩具阶段, 还有大量的 issues 需要处理， 不过值得继续关注。

最后

感兴趣的朋友可以看看， 做个todo-list体验一下。

希望这篇文章能帮到你。

才疏学浅，文中若有错误， 欢迎指正。

浏览 50
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
Recoil 是 React 的状态管理库
前端精髓
0
Facebook 新一代 React 状态管理库 Recoil
前端宇宙
0
Facebook 新一代 React 状态管理库 Recoil
前端小苑
0
Recoil：Facebook 新一代的 React 状态管理库
前端Sharing
0
Recoil：Facebook 新一代的 React 状态管理库
全栈前端精选
0
stattyReact 状态管理库
statty 是一个小巧而又不引人注目的，用于 React 和 Preact 应用程序的状态管理库。
marty.jsReact 状态管理库
marty.js用来为React应用提供状态管理的JavaScript库，实现了Fluxarchitecture.定义了一组规则用来管理应用的状态。Flux是Facebook推出的用来帮助他们自己构建
stattyReact 状态管理库
statty是一个小巧而又不引人注目的，用于React和Preact应用程序的状态管理库。使用方法：// https://codesandbox.io/s/rzpxx0w34import React 
marty.jsReact 状态管理库
marty.js 用来为 React 应用提供状态管理的 JavaScript 库，实现了 Flux
React FreezeReact 状态管理库
ReactFreeze是一个React状态管理库，可有效避免React的re-render，在不丢失组件和页面状态的情况下冻结组件树并将其替换为占位视图。值得注意的是，虽然冻结的组件树被替换为占位视图
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报