近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营, 由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多也越来越复杂。我们知道,任何状态都需要进行管理,那么今天我们来聊聊前端状态管理。
前端状态管理第三方出名的库有: Flux、Redux、Vuex、Mobx 等
这里专讲react的状态管理演变
redux
开发者门接触最多的应该就是redux,这里从浅入深的来逐步学习吧
1 .单纯的使用纯redux库,参考redux1
// Action
export const commonType = {//action type
SET_AGE: 'SET_AGE'
}
export function setAge(payload: any) {//action creator
return {
type: commonType.SET_AGE,
payload
}
}
// reducer
const commonReducer = (state = initialState, action: any) =>{
switch (action.type) {
case commonType.SET_AGE:
return { ...state, ...action.payload };
default:
return state;
}
}
const allReducer = combineReducers({
common:commonReducer
})
// store
import { createStore } from 'redux'
let store = createStore(allReducer);
// 使用(订阅)
import store from '../redux/store'
export default class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {iptVal:0};
}
componentDidMount() {
store.subscribe(() =>{
let {common:{age:iptVal}}= store.getState();
this.setState({iptVal});
})
}
render() {
return (<div>{this.state.iptVal}</div>);
}
}
// 使用(广播)
import store from '../redux/store'
export default class A extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {iptVal:0};
}
componentDidMount() {
store.subscribe(() =>{
let {common:{age:iptVal}}= store.getState();
this.setState({iptVal});
})
}
iptChange = (e: any) =>{
store.dispatch(actions.setAge({
age:e.target.value
}));
}
render() {
const { iptVal } = this.state;
return (
<>
<input type="text" value={iptVal} onChange={this.iptChange} />
<div>{iptVal}</div>
</>
)
}
}
缺点很明显,需要在改变和监听数据的地方都引入store,并手动与组件关联,因此有了第2种方式
2 .使用redux + react-redux方式, 参考redux2
// Action
export const commonType = {//action type
SET_AGE: 'SET_AGE'
}
export function setAge(payload: any) {//action creator
return {
type: commonType.SET_AGE,
payload
}
}
// reducer
import { combineReducers } from 'redux';
const commonReducer = (state = initialState, action: any) =>{
switch (action.type) {
case commonType.SET_AGE:
return { ...state, ...action.payload };
default:
return state;
}
}
const allReducer = combineReducers({
common:commonReducer
})
// store
import { createStore } from 'redux'
let store = createStore(allReducer);
// 使用(订阅)
import { connect } from 'react-redux'
class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
render() {
return (<div>{this.props.iptVal}</div>);
}
}
export default connect(
(state: any) => {
return {iptVal: state.common.age}
},null
)(App);
// 使用(广播)
import { connect } from 'react-redux'
class A extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
render() {
return (
<>
<input type="text" value={this.props.iptVal} onChange={this.props.iptChange} />
<div>{this.props.iptVal}</div>
</>
)
}
}
export default connect(
(state: any) => {
return {iptVal: state.common.age}
},
(dispatch: any)=>{return {
iptChange(e: any){
dispatch(actions.setAge({
age:e.target.value
}))
}
}}
)(A);
这样就不用手动处理全局状态与react的关系了,如果你了解注解(装饰器),看起来代码就更简单了,反正我是没有配置成功,你可以试试
不过action creator和reducer创建起来好费劲。action creator要写大量的重复代码,reducer遍地的switch case,所以便有了第3种方式。
3 .redux + react-redux + redux-actions, 源代码在redux3
// Action
import { createAction } from 'redux-actions';
export const commonType = {SET_AGE: 'SET_AGE'};//action type
export const setAge = createAction(commonType.SET_AGE);//action creator
// reducer
import { combineReducers } from 'redux';
import { handleActions } from "redux-actions";
const initialState = {age: 0}; //初始化state
let reducers = {
[commonType.SET_AGE](state: any, action: any){
let { payload } = action;
return {...state,...payload};
}
};
const commonReducer = handleActions<any>(reducers,initialState);
const allReducer = combineReducers({
common:commonReducer
})
// store
import { createStore } from 'redux'
let store = createStore(allReducer);
// 使用(订阅)
import { connect } from 'react-redux'
class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
render() {
return (<div>{this.props.iptVal}</div>);
}
}
export default connect(
(state: any) => {
return {iptVal: state.common.age}
},null
)(App);
// 使用(广播)
import { connect } from 'react-redux'
class A extends React.Component<any, any> {
constructor(props: any) {
super(props);
}
render() {
let {iptVal,iptChange} = this.props;
return (<>
<input type="text" value={iptVal} onChange={iptChange}/>
<div>{iptVal}</div>
</>)
}
}
export default connect(
(state: any) => {
return {iptVal: state.common.age}
},
(dispatch: any)=>{return {
iptChange(e: any){
dispatch(actions.setAge({
age:e.target.value
}))
}
}}
)(A);
这样做效果已经很好了,至少在hooks来之前,这是大家普遍使用的方法来管理react的全局状态。但是hooks之后,我推荐如下,原因是 不用引入任何第三方包
React.Context
使用作用域之React.Context,这个学过java的人都知道,此对象是贯穿整个应用的。通过注入便监听 Context来达到redux同样的效果,好不用引入第三方包。参考context
// Context
const commonContext = React.createContext({ //初始化,不具体实现
age: 0,
setAge: (age: number) => {}
});
// 使用(注入需要订阅的组件)
import {useState} from 'react';
import CommonContext from './context';
export default const App = () => {
const [ age, setAges ] = useState(10);
let myValue = {
age,setAge(age: number){setAges(age)}
};
return (<>
<CommonContext.Provider value={myValue}>
<A/>
<B/>
<C/>
<div>{age}</div>
</CommonContext.Provider>
</>);
}
// 使用(发起广播)
import * as React from 'react';
import { useContext } from 'react';
import commonContext from '../context';
export default const B =()=> {
const commonCtx = useContext(commonContext);
const onChange = (e: any)=>{
commonCtx.setAge(e.target.value)
};
return (<>
<div>{commonCtx.age}</div>
<input type="text" onChange={onChange} value={commonCtx.age}/>
</>)
}
// 使用(订阅监听)--函数式组件使用hooks订阅
import * as React from 'react';
import { useContext } from 'react';
import commonContext from '../context';
export default const A = (props: any) => {
const commonCtx = useContext(commonContext);
return (<div>{commonCtx.age}</div>)
}
// 使用(订阅监听)--类组件两种方式订阅
import * as React from 'react'
import commonContext from '../context';
export default class C extends React.Component <any,any> {
static contextType = commonContext;
constructor(props: any){
super(props);
}
render(){
return (
// 在没有useContext的hooks之前,通常这样取得和监听Context
<>
方式1:this.context,使用Class.contextType你可以在任何生命周期中访问到this.context:
<div>{this.context.age}</div>
方式2:Consumer, 让你在函数式组件中完成订阅 context:
<commonContext.Consumer>
{commonCtx=><div>{commonCtx.age}</div>}
</commonContext.Consumer>
</>
)
}
};
如果只是用Context,功能能实现,但是还不是很灵活,比如动态的value(state和reducer)你得自己手动创建并关联,所以便有了如下办法。
React.Context 和 hooks之useReducer
这是目前react官方最推荐的使用方式,也是本文一路想引申的,如果想单独看useReducer的使用方式请看useReducer,最终结合版看useReducerContext
// Context
const commonContext: any = React.createContext(null);
//action
export const commonType = {
SET_AGE:'SET_AGE'
}
export const setAge = (payload: any) =>{
return {
type: commonType.SET_AGE,
payload
}
}
//reducer
const initialState: any = {age: 0};
function reducer(state: any, action: any) {
switch (action.type) {
case commonType.SET_AGE:
let { payload } = action;
return {...state,...payload};
default:
throw new Error();
}
}
export {
initialState,
reducer
};
//使用(注入需要订阅的组件)
import * as React from 'react';
import A from './components/a';
import B from './components/b';
import C from './components/c';
import {useReducer} from 'react';
import { reducer, initialState } from './redux/reducer/common';
import CommonContext from './context';
export default () => {
const myValue = useReducer(reducer, initialState);
return (
<div>
<CommonContext.Provider value={myValue}>
<A/>
<B/>
<C/>
<div>{myValue[0].age}</div>
</CommonContext.Provider>
</div>
);
}
// 使用(发起广播)
import * as React from 'react';
import { useContext } from 'react';
import commonContext from '../context';
export default const B =()=> {
const [state,dispatch] = useContext(commonContext);
const onChange = (e: any)=>{
let payload = {
age: e.target.value
}
dispatch(setAge(payload))
};
return (<>
<div>{state.age}</div>
<input type="text" onChange={onChange} value={state.age}/>
</>)
}
// 使用(订阅监听)--函数式组件使用hooks订阅
import * as React from 'react';
import { useContext } from 'react';
import commonContext from '../context';
export default const A = (props: any) => {
const [state] = useContext(commonContext);
return (<div>{state.age}</div>)
}
// 使用(订阅监听)--类组件两种方式订阅
import * as React from 'react'
import commonContext from '../context';
export default class C extends React.Component <any,any> {
static contextType = commonContext;
constructor(props: any){
super(props);
}
render(){
return (
// 在没有useContext的hooks之前,通常这样取得和监听Context
<>
{/* 方式1:this.context,使用Class.contextType你可以在任何生命周期中访问到this.context */}
<div>{this.context[0].age}</div>
{/* 方式2:Consumer, 让你在函数式组件中完成订阅 context */}
<commonContext.Consumer>
{([state]:any)=>{
return <div>{state.age}</div>
}}
</commonContext.Consumer>
</>
//总结:使用useContext()时候我们可以不需要使用Consumer了,看你喜欢哪个了
)
}
};
demo地址:https://gitee.com/dshvv/reactStatus
这只是状态管理最基本的用法,还有特殊情况 比如异步action等等,没有专门讲,感兴趣的可以去看看,不过建议先看最普通和基础的