Reacts Statusverwaltungstools: 1. Verwenden Sie Hooks für die Statusverwaltung. 2. Verwenden Sie Redux für die Statusverwaltung. Diese Methode verfügt über einen relativ vollständigen Satz unterstützender Tools und kann verschiedene Middleware anpassen wird durch transparente funktionale reaktive Programmierung einfach und skalierbar gemacht.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.
In der jQuery-Ära sind DOM-Strukturen im JS-Code gemischt, und wenn verschiedene Prozesse kompliziert und miteinander verflochten sind, entsteht Spaghetti-Code. Bei Verwendung des Publish-Subscribe-Modells wird das Debuggen ein Chaos.
jQuery ist eine zwingende Programmierung für „Prozesse“, und so viele Befehle werden letztendlich verwendet, um die „Daten“ in der Benutzeroberfläche zu aktualisieren. Warum nicht einfach die Daten direkt ändern?
Beijing → Shanghai, ändern Sie einfach city="Beijing" in city="Shanghai". Unabhängig davon, ob das Flugzeug oder der Zug zu Fuß eine Panne hat oder ob Sie Wang Baoqiang unterwegs treffen, liegt die Bedeutung des modernen Front-End-Frameworks in der Innovation von Problemlösungsideen, die die verschiedenen Befehle des „Prozesses“ umwandeln die Beschreibung von „Zustand“.
Was ist Status?Status sind dynamische Daten in der Benutzeroberfläche. State in React
Im Zeitalter der React-Klassenkomponenten ist der Status this.state, der mit this.setState aktualisiert wird.
Um ein Durcheinander zu vermeiden, hat React die Konzepte „Komponenten“ und „unidirektionaler Datenfluss“ eingeführt. Bei Zuständen und Komponenten gibt es natürlich eine Zustandsübertragung zwischen Komponenten, die allgemein als „Kommunikation“ bezeichnet wird.
Vater-Kind-Kommunikation ist relativ einfach, während die Kommunikation zwischen Komponenten auf tiefer Ebene und über große Entfernungen auf „Statusförderung“ + schichtweiser Übertragung von Requisiten beruht.
Also führte React Context ein, eine offizielle Lösung für die „ebenenübergreifende“ Kommunikation zwischen Komponenten.
Aber Kontext ist eigentlich gleichbedeutend mit „Statusverbesserung“, es gibt keine zusätzliche Leistungsoptimierung und das Schreiben ist ausführlich.
Um die Leistung zu optimieren, werden normalerweise mehrere Kontexte hinzugefügt, was das Schreiben ausführlicher macht. Wenn das Projekt nicht so komplex ist, ist es nicht so einfach, es durch mehrere Ebenen zu führen.
Was ist „Staatsmanagement“?
Natürlich bringt die Verwendung der Statusverwaltungsbibliothek einige abgeleitete Denkmuster mit sich, z. B. wie der Status organisiert wird, wie öffentliche Logik, Geschäftslogik, Komponentenlogik usw. aufgeteilt werden, aber letztendlich sind dies der Fall nicht die Hauptgründe.
Der Kern besteht darin, praktische Probleme zu lösen – für die Kommunikation. Verschiedene andere Konzepte und Philosophien sind nicht erforderlich.
Context ist nicht so einfach zu verwenden und es gibt keine offiziellen Best Practices für React, daher wurden Community-Bibliotheken nacheinander geboren.
Zustandsverwaltungsmethoden in React
Hooks-Zustandsverwaltung
useContext+useReducer
Nutzungsmethode
import React from "react";
// 初始状态
export const state = {
count: 0,
name: "ry",
};
// reducer 用于修改状态
export const reducer = (state, action) => {
const { type, payload } = action;
switch (type) {
case "ModifyCount":
return {
...state,
count: payload,
};
case "ModifyName":
return {
...state,
name: payload,
};
default: {
return state;
}
}
};
export const GlobalContext = React.createContext(null);3. Verwendung in Komponenten src/components/Count/index.tsx
import React, { useReducer } from "react";
import './index.less'
import { state as initState, reducer, GlobalContext} from './store/reducer'
import Count from './components/Count'
import Name from './components/Name'
export default function () {
const [state, dispatch] = useReducer(reducer, initState);
return (
<div>
<GlobalContext.Provider value={{state, dispatch}}>
<Count />
<Name />
</GlobalContext.Provider>
</div>
)
}src/components/Name/index.tsx
import { GlobalContext } from "@/store/reducer";
import React, { FC, useContext } from "react";
const Count: FC = () => {
const ctx = useContext(GlobalContext)
return (
<div>
<p>count:{ctx.state.count}</p>
<button onClick={() => ctx.dispatch({ type: "ModifyCount", payload: ctx.state.count+1 })}>+1</button>
</div>
);
};
export default Count;useState+useEffect
So verwenden Sie1. Zustand und Reduzierer erstellensrc/global-states.ts
import { GlobalContext } from "@/store/reducer";
import React, { FC, useContext } from "react";
const Name: FC = () => {
const ctx = useContext(GlobalContext)
console.log("NameRerendered")
return (
<div>
<p>name:{ctx.state.name}</p>
</div>
);
};
export default Name;src/global-states.type.ts// 初始state
let globalState: GlobalStates = {
count: 0,
name: 'ry'
}
// reducer
export const modifyGlobalStates = (
operation: GlobalStatesModificationType,
payload: any
) => {
switch (operation) {
case GlobalStatesModificationType.MODIFY_COUNT:
globalState = Object.assign({}, globalState, { count: payload })
break
case GlobalStatesModificationType.MODIFY_NAME:
globalState = Object.assign({}, globalState, { name: payload })
break
}
broadcast()
}Nach dem Login kopieren
2.写一个发布订阅模式，让组件订阅globalState src/global-states.ts 3.组件中使用 src/App.tsx src/components/Count/index.tsx src/components/Name/index.tsx 优缺点分析 由于以上两种都是采用hooks进行状态管理，这里统一进行分析 优点 缺点 使用方法： 1.引入redux 2.新建reducer 在src/store/reducers文件夹下新建addReducer.ts（可建立多个reducer） 在src/stores文件夹下新建action.types.ts 3.合并reducer 在src/store/reducers文件夹下新建index.ts 3.创建store 在src/stores文件夹下新建index.ts 4.根组件通过 Provider 注入 store src/index.tsx（用provider将App.tsx包起来） 5.在组件中使用 src/somponents/Count/index.tsx src/somponents/Name/index.tsx 优缺点分析 优点 缺点 MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。 常规使用（mobx-react） 使用方法 1.引入mobx 2.创建store 在/src/store目录下创建你要用到的store（在这里使用多个store进行演示） store2.ts 3.导出store src/store/index.ts 4.根组件通过 Provider 注入 store src/index.tsx（用provider将App.tsx包起来） 5.在组件中使用 src/somponents/Count/index.tsx src/components/Name/index.tsx 优缺点分析： 优点： 缺点： 最佳实践（mobx+hooks） 使用方法 1.引入mobx 2.创建store 3.导出store（结合useContext） src/store/index.ts 4.在组件中使用 无需使用Provider注入根组件 src/components/Name/index.tsx Mobx自动订阅实现原理 基本概念 建立依赖 我们给组件包的一层observer实现了这个功能 组件每次mount和update时都会执行一遍useObserver函数，useObserver函数中通过reaction.track进行依赖收集，将该组件加到该Observable变量的依赖中（bindDependencies）。 reaction.track() reaction.track里面的核心内容是trackDerivedFunction 触发依赖 Observable（被观察者，状态）修改后，会调用它的set方法，然后再依次执行该Observable之前收集的依赖函数，触发rerender。 组件更新 用组件更新来简单阐述总结一下：mobx的执行原理。 observer这个装饰器（也可以是Hoc），对React组件的render方法进行track。 将render方法，加入到各个observable的依赖中。当observable发生变化，track方法就会执行。 track中，还是先进行依赖收集，调用forceUpdate去更新组件，然后结束依赖收集。 简单总结了一下目前较为常用的状态管理方式，我个人最喜欢的使用方式是Mobx+Hooks，简单轻量易上手。各位可以根据自己的需求选择适合自己项目的管理方式。 【相关推荐：Redis视频教程】 Das obige ist der detaillierte Inhalt vonWas nutzt React, um den Zustand zu verwalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!import { useState, useEffect } from 'react'
import {
GlobalStates,
GlobalStatesModificationType
} from './global-states.type'
let listeners = []
let globalState: GlobalStates = {
count: 0,
name: 'ry'
}
// 发布，所有订阅者收到消息，执行setState重新渲染
const broadcast = () => {
listeners.forEach((listener) => {
listener(globalState)
})
}
export const modifyGlobalStates = (
operation: GlobalStatesModificationType,
payload: any
) => {
switch (operation) {
case GlobalStatesModificationType.MODIFY_COUNT:
globalState = Object.assign({}, globalState, { count: payload })
break
case GlobalStatesModificationType.MODIFY_NAME:
globalState = Object.assign({}, globalState, { name: payload })
break
}
// 状态改变即发布
broadcast()
}
// useEffect + useState实现发布订阅
export const useGlobalStates = () => {
const [value, newListener] = useState(globalState)
useEffect(() => {
// newListener是新的订阅者
listeners.push(newListener)
// 组件卸载取消订阅
return () => {
listeners = listeners.filter((listener) => listener !== newListener)
}
})
return value
}Nach dem Login kopierenimport React from 'react'
import './index.less'
import Count from './components/Count'
import Name from './components/Name'
export default function () {
return (
<div>
<Count />
<Name />
</div>
)
}Nach dem Login kopierenimport React, { FC } from 'react'
import { useGlobalStates, modifyGlobalStates } from '@/store/global-states'
import { GlobalStatesModificationType } from '@/store/global-states.type'
const Count: FC = () => {
// 调用useGlobalStates()即订阅globalStates()
const { count } = useGlobalStates()
return (
<div>
<p>count:{count}</p>
<button
onClick={() =>
modifyGlobalStates(
GlobalStatesModificationType.MODIFY_COUNT,
count + 1
)
}
>
+1
</button>
</div>
)
}
export default CountNach dem Login kopierenimport React, { FC } from 'react'
import { useGlobalStates } from '@/store/global-states'
const Count: FC = () => {
const { name } = useGlobalStates()
console.log('NameRerendered')
return (
<div>
<p>name:{name}</p>
</div>
)
}
export default CountNach dem Login kopierenRedux状态管理
yarn add redux react-redux @types/react-redux redux-thunk
Nach dem Login kopierenimport * as types from '../action.types'
import { AnyAction } from 'redux'
// 定义参数接口
export interface AddState {
count: number
name: string
}
// 初始化state
let initialState: AddState = {
count: 0,
name: 'ry'
}
// 返回一个reducer
export default (state: AddState = initialState, action: AnyAction): AddState => {
switch (action.type) {
case types.ADD:
return { ...state, count: state.count + action.payload }
default:
return state
}
}Nach dem Login kopieren
主要用于声明action类型export const ADD = 'ADD'
export const DELETE = 'DELETE'
Nach dem Login kopierenimport { combineReducers, ReducersMapObject, AnyAction, Reducer } from 'redux'
import addReducer, { AddState } from './addReducer'
// 如有多个reducer则合并reducers，模块化
export interface CombinedState {
addReducer: AddState
}
const reducers: ReducersMapObject<CombinedState, AnyAction> = {
addReducer
}
const reducer: Reducer<CombinedState, AnyAction> = combineReducers(reducers)
export default reducerNach dem Login kopierenimport {
createStore,
applyMiddleware,
StoreEnhancer,
StoreEnhancerStoreCreator,
Store
} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducers'
// 生成store增强器
const storeEnhancer: StoreEnhancer = applyMiddleware(thunk)
const storeEnhancerStoreCreator: StoreEnhancerStoreCreator = storeEnhancer(createStore)
const store: Store = storeEnhancerStoreCreator(reducer)
export default storeNach dem Login kopierenimport React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)Nach dem Login kopierenimport React, { FC } from 'react'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { AddState } from 'src/store/reducers/addReducer'
import { CombinedState } from 'src/store/reducers'
import * as types from '@/store/action.types'
// 声明参数接口
interface Props {
count: number
add: (num: number) => void
}
// ReturnType获取函数返回值类型,&交叉类型(用于多类型合并)
// type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>
const Count: FC<Props> = (props) => {
const { count, add } = props
return (
<div>
<p>count: {count}</p>
<button onClick={() => add(5)}>addCount</button>
</div>
)
}
// 这里相当于自己手动做了映射，只有这里映射到的属性变化，组件才会rerender
const mapStateToProps = (state: CombinedState) => ({
count: state.addReducer.count
})
const mapDispatchToProps = (dispatch: Dispatch) => {
return {
add(num: number = 1) {
// payload为参数
dispatch({ type: types.ADD, payload: num })
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Count)Nach dem Login kopierenimport React, { FC } from 'react'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { AddState } from 'src/store/reducers/addReducer'
import { CombinedState } from 'src/store/reducers'
import * as types from '@/store/action.types'
// 声明参数接口
interface Props {
name: string
}
const Name: FC<Props> = (props) => {
const { name } = props
console.log('NameRerendered')
return (
<div>
<p>name: {name}</p>
</div>
)
}
// name变化组件才会rerender
const mapStateToProps = (state: CombinedState) => ({
name: state.addReducer.name
})
// addReducer内任意属性变化组件都会rerender
// const mapStateToProps = (state: CombinedState) => state.addReducer
export default connect(mapStateToProps)(Name)Nach dem Login kopierenMobx状态管理
yarn add mobx mobx-react -D
Nach dem Login kopieren
例如：
store1.tsimport { observable, action, makeObservable } from 'mobx'
class Store1 {
constructor() {
makeObservable(this) //mobx6.0之后必须要加上这一句
}
@observable
count = 0
@observable
name = 'ry'
@action
addCount = () => {
this.count += 1
}
}
const store1 = new Store1()
export default store1Nach dem Login kopieren
这里使用 makeAutoObservable代替了makeObservable，这样就不用对每个state和action进行修饰了（两个方法都可，自行选择）import { makeAutoObservable } from 'mobx'
class Store2 {
constructor() {
// mobx6.0之后必须要加上这一句
makeAutoObservable(this)
}
time = 11111111110
}
const store2 = new Store2()
export default store2Nach dem Login kopierenimport store1 from './store1'
import store2 from './store2'
export const store = { store1, store2 }Nach dem Login kopierenimport React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'mobx-react'
ReactDOM.render(
<Provider {...store}>
<App />
</Provider>,
document.getElementById('root')
)Nach dem Login kopierenimport React, { FC } from 'react'
import { observer, inject } from 'mobx-react'
// 类组件用装饰器注入，方法如下
// @inject('store1')
// @observer
interface Props {
store1?: any
}
const Count: FC<Props> = (props) => {
const { count, addCount } = props.store1
return (
<div>
<p>count: {count}</p>
<button onClick={addCount}>addCount</button>
</div>
)
}
// 函数组件用Hoc，方法如下（本文统一使用函数组件）
export default inject('store1')(observer(Count))Nach dem Login kopierenimport React, { FC } from 'react'
import { observer, inject } from 'mobx-react'
interface Props {
store1?: any
}
const Name: FC<Props> = (props) => {
const { name } = props.store1
console.log('NameRerendered')
return (
<div>
<p>name: {name}</p>
</div>
)
}
// 函数组件用Hoc，方法如下（本文统一使用函数组件）
export default inject('store1')(observer(Name))Nach dem Login kopierenimport React from 'react'
import store1 from './store1'
import store2 from './store2'
// 导出store1
export const storeContext1 = React.createContext(store1)
export const useStore1 = () => React.useContext(storeContext1)
// 导出store2
export const storeContext2 = React.createContext(store2)
export const useStore2 = () => React.useContext(storeContext2)
Nach dem Login kopieren
src/somponents/Count/index.tsximport React, { FC } from 'react'
import { observer } from 'mobx-react'
import { useStore1 } from '@/store/'
// 类组件可用装饰器，方法如下
// @observer
const Count: FC = () => {
const { count, addCount } = useStore1()
return (
<div>
<p>count: {count}</p>
<button onClick={addCount}>addCount</button>
</div>
)
}
// 函数组件用Hoc，方法如下（本文统一使用函数组件）
export default observer(Count)Nach dem Login kopierenimport React, { FC } from 'react'
import { observer } from 'mobx-react'
import { useStore1 } from '@/store/'
const Name: FC = () => {
const { name } = useStore1()
console.log('NameRerendered')
return (
<div>
<p>name: {name}</p>
</div>
)
}
export default observer(Name)Nach dem Login kopieren优缺点分析：
优点：
缺点：
Observable //被观察者，状态
Observer //观察者，组件
Reaction //响应，是一类的特殊的 Derivation，可以注册响应函数，使之在条件满足时自动执行。
Nach dem Login kopierenexport default observer(Name)
Nach dem Login kopieren// fn = function () { return baseComponent(props, ref);
export function useObserver(fn, baseComponentName) {
...
var rendering;
var exception;
reaction.track(function () {
try {
rendering = fn();
}
catch (e) {
exception = e;
}
});
if (exception) {
throw exception; // re-throw any exceptions caught during rendering
}
return rendering;
}Nach dem Login kopieren _proto.track = function track(fn) {
// 开始收集
startBatch();
var result = trackDerivedFunction(this, fn, undefined);
// 结束收集
endBatch();
};Nach dem Login kopierenfunction trackDerivedFunction<T>(derivation: IDerivation, f: () => T, context: any) {
...
let result
// 执行回调f，触发了变量（即组件的参数）的 get，从而获取 dep【收集依赖】
if (globalState.disableErrorBoundaries === true) {
result = f.call(context)
} else {
try {
result = f.call(context)
} catch (e) {
result = new CaughtException(e)
}
}
globalState.trackingDerivation = prevTracking
// 给 observable 绑定 derivation
bindDependencies(derivation)
...
return result
}Nach dem Login kopieren
总结
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
