最近在做專案技術堆疊整理工作;
由於團隊越來越大、人員增多、專案增多;
統一技術堆疊是一件非常有必要的事;
React 狀態管理工具有很多,但是選擇一個合適的狀態管理工具其實很重要;
今天跟大家分享我整理的幾個非常熱門的React狀態管理,希望對你有幫助。
【 1. Mobx 】
#Mobx
MobX 可以獨立於React 運作, 但是他們通常是結合在一起使用;新版的mobx-react-lite 庫非常輕量;使用時只需要使用導出的observer包裹組件; 然後引入狀態即可;
import React from "react" import ReactDOM from "react-dom" import { makeAutoObservable } from "mobx" import { observer } from "mobx-react-lite" class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increaseTimer() { this.secondsPassed += 1 } } const myTimer = new Timer() //被`observer`包裹的函数式组件会被监听在它每一次调用前发生的任何变化 const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed} </span>) ReactDOM.render(<TimerView timer={myTimer} />, document.body)
【 2. Redux 】
Redux
Redux 也是一個非常流行的狀態管理,只不過比起其他的狀態管理工具,會顯得笨重一些;當然喜歡使用Redux的人也會覺得Redux 非常的優雅;
import { createStore } from 'redux' /** * This is a reducer - a function that takes a current state value and an * action object describing "what happened", and returns a new state value. * A reducer's function signature is: (state, action) => newState * * The Redux state should contain only plain JS objects, arrays, and primitives. * The root state value is usually an object. It's important that you should * not mutate the state object, but return a new object if the state changes. * * You can use any conditional logic you want in a reducer. In this example, * we use a switch statement, but it's not required. */ function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { value: state.value + 1 } case 'counter/decremented': return { value: state.value - 1 } default: return state } } // Create a Redux store holding the state of your app. // Its API is { subscribe, dispatch, getState }. let store = createStore(counterReducer) // You can use subscribe() to update the UI in response to state changes. // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. // There may be additional use cases where it's helpful to subscribe as well. store.subscribe(() => console.log(store.getState())) // The only way to mutate the internal state is to dispatch an action. // The actions can be serialized, logged or stored and later replayed. store.dispatch({ type: 'counter/incremented' }) // {value: 1} store.dispatch({ type: 'counter/incremented' }) // {value: 2} store.dispatch({ type: 'counter/decremented' }) // {value: 1}
想要很快上手Redux 不是一件容易的事,還需要仔細琢磨一下; 不過好在redux官方推出了新的Redux-tookit大大簡化了使用Redux的步驟。
【 3. Rematch 】
#Rematch
Rematch 延續了Redux的優點,核心概念還是基於Redux;但是比起Redux,它簡直太強大了! 。
import { createModel } from "@rematch/core"; import { RootModel } from "."; export const count = createModel<RootModel>()({ state: 0, // initial state reducers: { // handle state changes with pure functions increment(state, payload: number) { return state + payload; }, }, effects: (dispatch) => ({ // handle state changes with impure functions. // use async/await for async actions async incrementAsync(payload: number, state) { console.log("This is current root state", state); await new Promise((resolve) => setTimeout(resolve, 1000)); dispatch.count.increment(payload); }, }), });
以下是Rematch 的一些特性:
【 4. Recoil 】
#RecoilRecoil 提供了一個新的狀態管理模型— —Atom模型,它可以更好地處理複雜的狀態邏輯。 如需在元件中使用 Recoil,則可以將 RecoilRoot 放置在父元件的某個位置。將他設為根元件為最佳:import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( <RecoilRoot> <CharacterCounter /> </RecoilRoot> ); }一個
atom 代表一個狀態。 Atom 可在任意元件中進行讀寫。讀取atom 值的元件隱含訂閱了該atom,因此任何atom 的更新都會致使使用對應atom 的元件重新渲染;
使用atom狀態,需要在元件內引入useRecoilState: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> ); }
【 5. Hookstate 】
#hookStateHookState 也是一個非常簡單的狀態管理工具庫,它直覺的Api,供你輕鬆的存取狀態; 它的主要特點包括:【 6. Jotai 】
#JotaiJotai 是一個React 的原始和靈活的狀態管理庫。它類似於 Recoil,但具有更小的套件大小 、更簡約的 API、更好的 TypeScript 支援、更廣泛的文件以及沒有實驗性標籤。 使用Jotai,你可以將狀態儲存在單一的store中,並使用自訂的hooks來存取和更新狀態。import { atom, useAtom } from 'jotai'; const countAtom = atom(0); function Counter() { const [count, setCount] = useAtom(countAtom); return ( <div> <h1>Count: {count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); }以上是Jotai的使用範例程式碼,使用Jotai非常簡單。
【 7.Zustand】
#Zustand 提供了一個簡單的方式來管理React應用程式中的狀態。 它的主要特點是易於使用和輕量級。Zustand Code
使用Zustand,你可以将状态存储在一个单一的store中,并使用自定义的hooks来访问和更新状态。这使得状态管理变得非常简单和直观。
import create from 'zustand' const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })) function Counter() { const { count, increment, decrement } = useStore() return ( <div> <h1>Count: {count}</h1> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ) }
使用Zustand也非常的简单!
在这个例子中,我们使用 create
函数创建了一个新的store,
并定义了一个名为 count
的状态和两个更新状态的
函数 increment
和 decrement
。
然后,我们使用 useStore
自定义 hook 来访问和更新状态。
【以上7个状态管理工具各有特点】
考虑到团队人员技术的参差不齐,未来项目的可维护、延展性;
建议大家选择入门简单,上手快的工具;
因为之前最早我们选择的是Redux,现在再回头看原来的项目,简直难以维护了。
如果你的团队还是倾向于Redux,这里建议还是使用Rematch比较好。
如果是还没使用状态管理,又想用的,建议使用mobx吧!
(学习视频分享:编程基础视频)
以上是【整理分享】7個熱門的React狀態管理工具的詳細內容。更多資訊請關注PHP中文網其他相關文章!