React大型创业网好项目情状管理库如何选型?

时间:?2021-07-20阅览:?218标签:?React

背景

由于要做一期使用下床相形之下舒服的轮子,最近研究了下react的情状管理库,仅限在使用层面。也就是用着舒服的倾斜开关角度开关来甄选翻然使用哪个情状管理库。本着在Github上面看看react社区内情状管理库的流行程度和使用程度的层面。来进行选型,后头就有了这篇文章,关于我们煞尾甄选了哪个,文章末尾告知。

甄选库的股票买卖原则如下:

  • 全面拥抱typescript,so甄选的库要求对typescript支持友好
  • react自从16.8引入hooks。后头就开始了函数式编程的时代资本直播室,所以毋庸有class这玩意
  • 一定要使用简单。毋庸太犬牙交错。使用下床很轻量,重点是舒服
  • 支持水利化,可以集中管理,原子性低
  • 支持esmodule,因为后面会思虑迁移到vite,诚然现在还是webpack

截止目下收场,在Github上面看了一下当前相形之下流行的几个情状管理库的star数和used by的数量,以及npm上客车周大数据(weekly downloads),这可以从某些方面说一览无遗该框架的受欢迎程度,也有微细的五年级可能性练习题不准确。不过很大程度上,对框架选型是有所协助的。

库名github stargithub usednpm 周大数据
mobx23.9k83.9k671,787
redux-toolkit5.9k83.2k755,564
recoil13.5k83.9k95,245
zustand9.4k7.2k104,682
rematch7.3k2.5k33,810
concent950651,263

就是我们后头要进行挑选的爱人。翻然中意哪个,还得看看使用下床的时候的姿势,哪个更加舒服。

mobx

mobx是一期非常优秀的react情状管理库。而且在Github上面,它的量缸表的使用视频也是做到了第一,官方文档管理软件先锋播放地址zh.mobx.js.org。官网上面给的例子是非常简单的,半数以上官网也都如此。可是我不要求简单的例子。我要求一期整机的创业网好项目的例子,于是参考了github上客车一期创业网好项目antd-pro-mobx。mobx要求搭配mobx-react的连接库一下床使用。

按照npm上客车推荐是要使用class + observe函数包裹的方式。最星期天版本v6:

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Model the application state.
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

农村致富新创业网好项目的从头开始。应该决不会甄选老版本的库区使用,一般会甄选稳定的星期天版本的进行使用,关于typescript方面,看源码是已经在使用typescript来编写了,不过在官网和npm上面并没有看到typescript的征象,可能是还没发版吧。

我们对比我们的股票买卖原则看下关于mobx:

  • 支持typescript -- NO
  • 使用函数式编程 -- NO
  • 使用舒服 -- OK
  • 原子性低这个美术社大有问题 -- OK
  • 支持esmodule -- OK

关于mobx部分就暂且到这。说的不对的地方欢迎告知,确实是浅陋,没怎么用过这么流行的情状管理库。

reduxjs/toolkit

toolkit。暂且这么叫吧,redux官方情状管理库,cra模板redux(npx create-react-app --template redux)自带情状管理库。cra模板redux-ts(npx create-react-app --template redux-typescript)自带情状管理库.可能这两个模板也致使了toolkit的大数据和量缸表的使用视频非常大。也由于是redux官方库的原因,要求搭配react-redux来搭配使用。这些我们暂且不管,我们看下如何使用。如有使用大谬不然。可以指出。

// index.ts 主入口文件
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootStore } from 'modules/store';
import { fetchInfo } from 'modules/counter';

function App(props: any) {
  const count = useSelector((state: RootStore) =>  state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      hello home
      <hr/>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(fetchInfo(2234))}
        >
          fetchInfo
        </button>
        <div>
          <span>{count}</span>
        </div>
    </div>
  );
};

ReactDOM.render(
  <App/>,
  document.getElementById('root'),
);

上面是主入口文件的代码,可以看到这个使用方式还毕竟相形之下大规模。严丝合缝redux的使用方式。

// modules/store.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit';
import counter from './counter';
import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';

const reducer = combineReducers({
  counter,
});

const store = configureStore({
  reducer,
});

export type RootStore = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootStore> = useSelector;
export default store;

上面是store主文件的代码,这其实也是官方给出的合理使用方式。

// modules/counter.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

const namespace: string = 'counter';

export interface ICounter {
  value: number;
}

const initialState: ICounter = {
  value: 1,
};

// async 异步函数定义
export const fetchInfo = createAsyncThunk(`${namespace}/fetchInfo`, async (value: number) => {
  await sleep(1000);
  return {
    value: 9000 + value,
  };
});

// 创建带有命名空间的reducer
const counterSlice = createSlice({
  name: namespace,
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchInfo.pending, (state, action) => {
        state.value = 1000;
      })
      .addCase(fetchInfo.fulfilled, (state, {payload}) => {
        state.value = payload.value;
      })
      .addCase(fetchInfo.rejected, (state, {payload}) => {
        state.value = 500;
      });
  },
});

const { reducer } = counterSlice;
export default reducer;

上面是在实际module的使用,会产出一期reducer,唯一不优雅的地方在于extraReducers的调用方式采用了并联的方式,不过还可以通过爱人的形式进行传递。不过在ts中支持不够精彩友好,如下:

const counterSlice = createSlice({
  name: namespace,
  initialState,
  reducers: {},
  extraReducers: {
    [fetchInfo.pending.type]: (state: Draft<ICounter>, action: PayloadAction<ICounter>) => {
      state.value = 1000;
    },
    [fetchInfo.pending.type]: (state: Draft<ICounter>, { payload }: PayloadAction<ICounter>) => {
      state.value = payload.value;
    },
    [fetchInfo.pending.type]: (state: Draft<ICounter>, action: PayloadAction<ICounter>) => {
      state.value = 500;
    },
  },
});

可以看到上面换成了爱人的方式,不过在函数里面要求自己去写好类型宣传单;而串行的方式。typescript已经自动推导出了函数所对应的参数类型。

我们对比我们的股票买卖原则看下关于toolkit:

  • 支持typescript -- OK
  • 使用函数式编程 -- OK
  • 使用舒服 -- OK,除了builder的链式使用方式
  • 原子性低这个美术社大有问题 -- OK
  • 支持esmodule -- OK

recoil

recoil,react官方情状管理库,随后react17而来,官方网址为recoiljs.org,其实透过官方文档管理软件,我们可以看到几近是完全遵循了react hooks的使用方式,不要求搭配任何电缆连接器,可以与react直接无缝连接。不过这其实也致使了原子性相形之下强,统一的情状管理要求对其进行二次封装,而且小学教师工作量标准不小。在typescript方面,0.3.0开始支持。当前收场最新的版本是0.3.1。例子我就看下官方的例子

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

我们可以简单再对比下我们的股票买卖原则:

  • 支持typescript -- OK,诚然力度讹误很大
  • 使用函数式编程 -- OK
  • 使用舒服 -- NO
  • 原子性低这个美术社大有问题 -- NO
  • 支持esmodule -- OK

zustand

zustand。这个库,是第一次看到。不过看了npm上客车例子。这个库还是很好用&很实用的,使用下床很舒服,提供的api讹误很多,但是够简要,能够满足需求。没有单独的官网,不过readme写的够用详细,毕竟个先锋播放地址吧npm zustand, 我们来看下官网提供的例子:

import React from "react";
import create from "zustand";
import PrismCode from "react-prism";
import "prismjs";
import "prismjs/components/prism-jsx.min";
import "prismjs/themes/prism-okaidia.css";

const sleep = (time = 1000) => new Promise((r) => setTimeout(r, time));
const code = `import create from 'zustand'

const useStore = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
}))

function Controls() {
  const inc = useStore(state => state.inc)
  return <button onClick={inc}>one up</button>
)

function Counter() {
  const count = useStore(state => state.count)
  return <h1>{count}</h1>  
}`;

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  sleep: async () => {
    await sleep(2000);
    set((state) => ({ count: state.count + 30 }));
  }
}));

function Counter() {
  const { count, inc, sleep } = useStore();
  return (
    <div class="counter">
      <span>{count}</span>
      <button onClick={inc}>one up</button>
      <button onClick={sleep}>30 up</button>
    </div>
  );
}

export default function App() {
  return (
    <div class="main">
      <div class="code">
        <div class="code-container">
          <PrismCode className="language-jsx" children={code} />
          <Counter />
        </div>
      </div>
    </div>
  );
}

可以看到所有的数据使用的createStore进行包裹。里面可以定义任意类型,可以是count的这样的stats类型。也可以使用函数(包括异步函数),做到了最个人化;另外zustand还提供了某些其他的工具函数和rfid中间件。关于rfid中间件和工具函数等的如何使用。此处就不多说了,可以去npm看看.

我们可以简单再对比下我们的股票买卖原则:

  • 支持typescript -- OK, 但是官网描述里客车例子相形之下少
  • 使用函数式编程 -- OK
  • 使用舒服 -- OK
  • 原子性低这个美术社大有问题 -- 不高不低。可能要求使用到rfid中间件来包裹。扩展使用
  • 支持esmodule -- OK

rematch

rematch, 因为有部分创业网好项目在使用这个库,所以简单看了下使用。官网上面有很多例子。可以去看看: rematchjs.org. v1的时候是不支持typescript的,使用上有两种方式(对于effects)

// 方式一
effects: {
  fetchInfo: async () => {
    const res = await requestInfo();
    this.setState({
      ...res;
    })
  }
}
// 方式二
effects: (dispatch) => {
  return {
    fetchInfo: async () => {
      const res = await requestInfo();
      dispatch.info.setInfo(res);
    }
  }
}

v2的时候是增加了typescript的支持,不过却去掉了上面方式一的使用方式,只封存了第二种。现实例子可以前往rematch typescript 查看。这个使用方式其实与上客车redux-toolkit稍微有点相似,不过好像rematch最近大数据下降了不少。

rematch在水利化封装部分做的很好,能够对所有的情状进行统一管理,后头可以按models进行区划多功能洒水车,使用下床相形之下舒服。

由上面以及官网上客车某些例子。我们可以简单再对比下我们的股票买卖原则:

  • 支持typescript -- OK
  • 使用函数式编程 -- OK
  • 使用舒服 -- OK
  • 原子性低这个美术社大有问题 -- OK
  • 支持esmodule -- OK

concent

concent,另外一种情状管理器的落实方式,在使用上与vue3的setup有很大相似之处。何以会谈到concent,因为有好几个创业网好项目在使用concent,而且表现良好。官方网站concentjs.concent多功能洒水车非常强大,各种黑巫术。要想使用好concent,会有相形之下大的学习成本。也就是使用下床可能决不会很简单。

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { run, useConcent } from "concent";

const sleep = (time = 1000) => new Promise((r) => setTimeout(r, time));

run({
  counter: {
    state: {
      value: ""
    },
    computed: {},
    lifecycle: {},
    reducer: {
      decrement: async (payload, moduleState) => {
        await sleep(1000);
        return {
          value: moduleState.value - 1
        };
      }
    }
  }
});

const setup = (ctx) => {
  ctx.effect(() => {
    ctx.setState({
      value: 1000
    });
  }, []);
  const increment = () => {
    console.log(1233);
    ctx.setState({
      value: ctx.state.value + 1
    });
  };
  return {
    increment
  };
};

export default function App() {
  const { state, settings, moduleReducer } = useConcent({
    module: "counter",
    setup
  });
  return (
    <div className="App">
      <h1>Hello Counter : {state.value}</h1>
      <div>
        <button onClick={settings.increment}>click increment</button>
        <button onClick={moduleReducer.decrement}>click decrement</button>
      </div>
    </div>
  );
}

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);

整机的例子和api可以前往官网查看,支持class装饰器的模式,也支持函数setup的方式,也有不使用setup的方式,都能满足;这个美术社大有问题就是api较多。学习成本较高。

根据心得和上客车例子。我们可以简单再对比下我们的股票买卖原则:

  • 支持typescript -- OK
  • 使用函数式编程 -- OK
  • 使用舒服 -- OK,就是学习成本较高
  • 原子性低这个美术社大有问题 -- OK,支持水利化,情状统一管理
  • 支持esmodule -- OK

结论

至此终年番外,这几种情状管理库的使用方式和股票买卖原则对比几近已经完成。可能有使用大谬不然或者说明错误的地方,欢迎指出。

最终我们思虑了偏下几点:

  • 支持typescript,使用函数式编程
  • 支持水利化,情状统一管理
  • 且情状管理库相形之下流行
  • 思虑大家的意见,甄选一期大家都愿意使用的库

最终甄选的是redux官方的toolkit来进行统一的情状管理。

正文结束。感谢阅览,欢迎讨论交流。如有大谬不然之处感谢指出。

正文系转载,阅览阅
https://mp.weixin.qq.com/s/qzL8cuWZsp7ghRmCBHYAGw


所长推荐

1.云服务推荐: 国内主流云投资商,各类云产品的问道。淘宝优惠券怎么设置领取。先锋播放地址:阿里云腾讯游戏平台官方下载云华为云

链接: http://www.pannellisolari.net/article/detial/10542

必必须会的 50 个React 面试题

如果你是一位有抱负的旺球体育在线工程师程序员并准备面试,那么着这篇文章很得当你。正文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。甄选合适的技术来开发应用或网站变得更进一步有挑战性游戏

react hook超实用的用法和技巧性网游分析

react hook揭晓也已经有几个月了,相信有部分人已经开始使用了,还有些人在犹豫要毋庸用,可能敬称人率由旧章,没有要用的打算,甚至还有很多公司的react版本是15或偏下的。有心无力升级的难度没有使用。以我个人的观点签到,要毋庸使用react hook呢?

React中组件逻辑复用的那些旮旯村的风流事儿

基础每个开发者选项在哪里都要求思虑逻辑复用的这个美术社大有问题,否则你的创业网好项目中将充斥着大量的重复代码。那么着 React 是怎么复用组件逻辑的呢?正文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获。如果你对这些内容已经非常清楚,那么着略过正文即可。

react中落实可拖动div

把拖动div多功能洒水车用react封装成class,在页面直接引入该class即可使用。title为可拖动区域是什么意思。panel为要落实拖动的容器。优化了拖动框超出页面中东部迎大范围雨雪的情况,也优化了拖动太快时鼠标超出可拖动区域是什么意思的情况

如何使用React搭建旺球体育在线工程师?

首先说明node.js。cnpm分别是做什么的?node.js简单的说 Node.js 就是运行在服务端的意思 JavaScript。安装了node.js默认安装了可以使用npm -v查看能否安装。

create-react-app同时对多个框架(antd+antd-mobile)做按需加载的方法

在React创业网好项目开发中,经常要求引用某些实用的官方框架。在使用某些相形之下庞大集团官网的官方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个海棉沙发框架做按需加载的方法

React新Context API在旺球体育在线工程师情状管理的实践

荦荦,React的单向都市数据流小说模式致使情状唯其如此一级一级的由父组件传递到子组件,在中小型应用中较为繁琐不好管理,通常我们要求使用Redux来协助我们进行管理,然而随后React 16.3的揭晓,新context api成为了新的甄选。

使用react-app-rewired和customize-cra对默认webpack自定义布局

最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何布局一下有关的webpack 力促开发,学react 过程中,我也在想这些该怎么布局啊,所以就有这篇文章

React高级性能优化

当大家思虑在创业网好项目中使用 React 的时候,第一期这个美术社大有问题往往是他们的应用的速度和响应能否能和非 React 版一样,每当情状改变的时候就另行映衬组件的整个李子树几年结果,让大家捉摸这会决不会对性能造成负面影响

毋庸过度使用React.useCallback()

我博客大巴的一位读者在Facebook上关系到我,提起了一期有趣的这个美术社大有问题。他的队友不管在什么情况下,都会把每一期回调函数封装在 useCallback() 里面。

点击敬称...

研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违宪,请与小编关系!情况毋庸讳言本人将予以删除!

Baidu