react hooks 全面转换攻略(三) 全局存储解决方案
针对 react hooks 的新版本解决方案
一.redux维持原方案
若想要无缝使用原来的 redux,和其配套的中间件 promise,thunk,saga 等等的话
可以使用 redux-react-hook
github 链接 redux-react-hook
一个简单的使用例子:
import {useDispatch, useMappedState} from 'redux-react-hook';
export function DeleteButton({index}) {
// 类似于以前 react-redux 中的 connect 函数
const mapState = useCallback(
state => ({
canDelete: state.todos[index].canDelete,
name: state.todos[index].name,
}),
[index],
);
// 获取 redux 的数据
const {canDelete, name} = useMappedState(mapState);
// 获取 dispatch
const dispatch = useDispatch();
// button click handle
const deleteTodo = useCallback(
() =>
dispatch({
type: 'delete todo',
index,
}),
[index],
);
return (
<button disabled={!canDelete} onClick={deleteTodo}>
Delete {name}
</button>
);
}
使用方法和以前一致
二.使用 useReducer 与 context
在 index 或 app 中提供全局的 redux 与 dispatch
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
}
function wrapperDispatch(dispatch) {
// 功能和 redux-promise 相同
return function (action) {
isPromise(action.payload) ?
action.payload.then(v => {
dispatch({type: action.type, payload: v})
}).catch((error) => {
dispatch(Object.assign({}, action, {
payload: error,
error: true
}));
return Promise.reject(error);
})
:
dispatch(action);
};
}
function Wrap(props) {
// 确保在 dispatch 后不会刷新APP组件
const [state, dispatch] = useReducer(reducers, ReducersValue);
console.log('render wrap')
return (<MainContext.Provider value={{state: state, dispatch: wrapperDispatch(dispatch)}}>{props.children}</MainContext.Provider>)
}
function App() {
console.log('render App')
return <Wrap>
<Router>
<Switch>
<Route path="/login" component={Login} exact/>
<Route path="/" component={MainIndex}/>
</Switch>
</Router>
</Wrap>
}
具体使用:
function useDispatch() {
// 获取 dispatch
const store = useContext(MainContext);
return store.dispatch;
}
function useStoreState(mapState) {
//存储 state 且判断是否需要 render
const {state:store} = useContext(MainContext);
const mapStateFn = () => mapState(store);
const [mappedState, setMappedState] = useState(() => mapStateFn());
const lastRenderedMappedState = useRef();
// Set the last mapped state after rendering.
useEffect(() => {
lastRenderedMappedState.current = mappedState;
});
useEffect(
() => {
console.log('useEffect ')
const checkForUpdates = () => {
const newMappedState = mapStateFn();
if (!_.isEqual(newMappedState, lastRenderedMappedState.current)) {
setMappedState(newMappedState);
}
};
checkForUpdates();
},
[store, mapState],
);
return mappedState
}
// 组件内使用
const ResourceReducer = useStoreState(state => state.ResourceReducer)
const dispatch = useDispatch()
他的功能已经足够了,在使用的地方使用函数即可,很方便
但是也有一些不足的地方是在根源上的,即 context,
在同一个页面中 如果有多个使用 context 的地方
那么如果一旦dispatch ,其他的所有地方也会触发render 造成资源的浪费,小项目还好,大项目仍旧不可
取
(除非 react 的 context 函数添加 deps)
三.自定义解决方案
原理就是存储一个全局变量 ,通过 import 引入;
我自己写了一个例子:https://github.com/Grewer/react-hooks-store
想要基础的实现只需要 30+ 行的代码即可
class Modal {
private value: any;
private prevValue: any;
private reducers: (state, action) => {};
private queue: any = [];
private dispatch: (action) => void;
constructor(reducers) {
this.reducers = combineReducers(reducers)
// combineReducers 来自于 reudx ,可以引入也可以自己写一个(后续我会写一个库,会包含此函数)
this.value = this.reducers({}, {})
this.dispatch = action => {
this.prevValue = this.value;
this.value = this.reducers(this.value, action)
this.onDataChange()
}
}
useModal = (deps?: string[]) => {
const [, setState] = useState(this.value);
useEffect(() => {
const index = this.queue.push({setState, deps}); // 订阅
return () => { // 组件销毁时取消
this.queue.splice(index - 1, 1);
};
}, []);
return [this.value, this.dispatch]
}
onDataChange = () => {
this.queue.forEach((queue) => {
const isRender = queue.deps ? queue.deps.some(dep => this.prevValue[dep] !== this.value[dep]) : true
isRender && queue.setState(this.value)
});
}
}
// 初始化 reducers
const modal = new Modal({
countReducer: function (state = 0, action) {
console.log('count Reducer', state, action)
switch (action.type) {
case "ADD":
console.log('trigger')
return state + action.payload || 1
default:
return state
}
},
listReducer: function (state = [] as any, action) {
console.log('list Reducer', state, action)
switch (action.type) {
case "ADD_LIST":
console.log('trigger')
state.push(action.payload)
return [...state]
default:
return state
}
},
personReducer: function (state = {name: 'lll', age: 18} as any, action) {
console.log('person Reducer', state, action)
switch (action.type) {
case "CHANGE_NAME":
return Object.assign({}, state, {name: action.payload})
default:
return state
}
}
})
// 导出 useModal
export const useModal = modal.useModal
简单的使用:
function Count(props) {
const [state, dispatch] = useModal(['countReducer'])
// 非 countReducer 的更新 不会触发此函数 render
console.warn('render Count', state, dispatch)
return <div>
<button onClick={() => dispatch({type: "ADD", payload: 2})}>+</button>
</div>
}
当然你也可以自己写一个,自己想要的方案
总结
hooks 的存储方案基本就这 3 类,可以用现成的,也可以使用自己写的方案
react hooks 全面转换攻略(三) 全局存储解决方案的更多相关文章
- react hooks 全面转换攻略(一) react本篇之useState,useEffect
useState 经典案例: import { useState } from 'react'; function Example() { const [count, setCount] = useS ...
- react hooks 全面转换攻略(二) react本篇剩余 api
useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: function useMemo<T>(factory: () => T, d ...
- 攻略三战的完美体验3Castle Fantisia阿兰·梅希亚战争艾伦西战记它包含重做版本(这是新的艾伦·梅希亚大战)
(城堡幻想曲3,纠正大家个错误哦,不是圣魔大战3,圣魔大战是城堡幻想曲2,圣魔大战不是个系列,艾伦西亚战记==艾伦希亚战记,一个游戏日文名:タイトル キャッスルファンタジア -エレンシア戦記-リニュー ...
- vc6开发ActiveX并发布全攻略(三)(转)
一.环境: windows xp sp3 Microsoft VC++ 6.0 二.制作文件 打开iexpress.exe(windows提供的一个向导式cab制作工具,位置:C:\WINDOWS\s ...
- mac攻略(三) -- apache站点配置
Mac OS X 中默认有两个目录可以直接运行你的 Web 程序, 一个是系统级的 Web 根目录:/Library/WebServer/Documents/ 此根目录我们平常使用地址http://l ...
- JQuery攻略(三)数组与字符串
在上两章,JQuery攻略(一) 基础知识——选择器 与 DOM 和 JQuery攻略(二) Jquery手册 我们为后面的章节打好了基础,在这一章节中,我们继续. 在这一章节中,我们记录的是JQue ...
- 【与软件无关】2013赤峰地区C1科目三考试攻略【绝对原创】
期待很久的科目三,终于在开考了.传说中的全部电子评判,让习惯给考官送礼的赤峰人民无所是从.据说前几天曾经有一个驾校,考了一整天,八十多个人一个没过的. 我这个攻略是今天通过考试后的一点心得,希望能有用 ...
- 老李分享:《Linux Shell脚本攻略》 要点(三)
老李分享:<Linux Shell脚本攻略> 要点(三) 1.生产任意大小的文件 [root@localhost dd_test]#[root@localhost dd_test]# ...
- silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上.我想写成教程教大家怎么开发出来,会不会 ...
随机推荐
- Python基础之 一 文件操作
文件操作 流程: 1:打开文件,得到文件句柄并赋值给一个变量 2:通过句柄对文件进行操作 3:关闭文件 模式解释 r(读) , w(写) ,a(附加)r+(读写的读), w+(读写的写),a+(读附加 ...
- Codeforces 920E(补图BFS)
题意: n(n<=200000)个点的完全图删去了m(m<=200000)条边,求剩下图的连通分量. 分析: 将未访问过的点用一个链表串起来 仍旧进行BFS,每次BFS扩展一个点u的时候, ...
- Java反射常用示例
package xmq.study.reflection; import java.lang.annotation.Annotation; import java.lang.reflect.Const ...
- 30分钟学会如何使用Shiro(转)
本文转自http://www.cnblogs.com/learnhow/p/5694876.html 感谢作者 本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jin ...
- eclipse中maven插件上传项目jar包到私服
我们知道,每一个公司都会有自己的工具包或公共包.这样的包就能够上传到公司的maven私服,就不用每一个人都去同步开发包了. 那么,怎么把本地项目打包并公布到私服呢?依照例如以下步骤就能够轻松完毕. 1 ...
- 【python】搜索引擎方面的资料
http://blog.csdn.net/hguisu/article/category/1230933
- C++设计模式之适配器模式(二)
3.Socket网络通信的设计与实现------类适配器 除了对象适配器模式之外.适配器模式另一种形式.那就是类适配器模式,类适配器模式和对象适配器模式最大的差别在于适配器和适配者之间的关系不同,对象 ...
- js 时钟特效
时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...
- spring实战笔记6---springMVC的请求过程
之前有一次在面试其中被问到了这个问题.当时说得不是非常清楚,有些细节的地方想不起来了.所以在这里从新回想和总结一下SpringMVC的起步.请求的运行过程. 在SpringMVC其中.跟请求(Requ ...
- 《coredump问题原理探究》Linux x86版7.9节list相关的iterator对象
这一节.看一下list的iterator对象在内存的布局 1 #include <list> 2 3 void init( std::list<int>& lst ) ...