注:如要运行本文的代码,请先确认自己的react版本已支持hooks
react hooks出来已经有段时间了,本文不对hooks的具体用法作介绍,而是使用hooks实现一个简易的基于context的redux
React hooks自带了useReducer供我们使用,它接受两个参数,一是reducer函数,二是初始state,并返回state和dispatch函数,如下
const [state, dispatch] = useReducer(reducer, initialState);
这个函数自己实现的话也不难,如下:
const useMyReducer = (reducer, initialState) => {
const [state, setState] = useState(initialState);
const dispatch = action => {
const newState = reducer(action, state);
setState(newState);
};
return [state, dispatch];
};
即将initialState作为state的初始状态传入useState,dispatch则是一个函数,它会将接受的action和state传给reducer,并获取reducer的返回值赋给state
我们先利用useReducer实现一个计数器的简单页面
reducer函数和initialState如下:
const initialState = {
count: 0
};
const reducer = (state, action) => {
switch (action.type) {
case "increase":
return { ...state, count: state.count + 1 };
case "decrease":
return { ...state, count: state.count - 1 };
default:
return state;
}
};
计数器组件:
const Demo = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
counter:{state.count}
<div>
<button
onClick={() => {
dispatch({ type: "increase" });
}}
>
increase
</button>
<button
onClick={() => {
dispatch({ type: "decrease" });
}}
>
decrease
</button>
</div>
</div>
);
};
这就是初版的redux了,但这个redux有些问题,就是它的state和dispatch是属于自己的,其他组件并不能拿到,也就是说,如果我们的页面有两个Demo组件,它们的state是各自独立,互不影响的
为了解决上述问题,我们必须拥有一个全局状态,并将state和dispatch放入这个全局状态中。这里,我们选用context作为我们的全局状态,context在旧版React中不推荐使用,但在改进之后,官方开始推荐大家使用
我们先创建一个context:
const context = React.createContext();
为了各个组件都能拿到context的数据,我们需要有一个Provider组件包在最外层:
const Provider = props => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<context.Provider value={{ state, dispatch }}>
{props.children}
</context.Provider>
);
};
我们将useReducer返回的state、dispatch传入context.Provider中,让它的children都能拿到
然后,我们像下面一样用Provider包在组件外层:
<Provider>
<Demo />
<Demo />
</Provider>
我们删去计数器Demo组件中的:
const [state, dispatch] = useReducer(reducer, initialState);
加上通过useContext函数拿到context上的数据:
const { state, dispatch } = useContext(context);
要注意的是,传入useContext函数的context必须是我们之前通过React.createContext()创建的context
这样,即使是两个Demo组件,它们也是共用一份数据了
很显然,现在的context-redux和单纯的redux一样,只能dispatch一个对象,也就是说,这个dispatch操作是同步的,如果我们要做异步的操作呢?很简单,我们借鉴redux-thunk的方法,让dispatch可以接受函数参数
改造Provider函数组件如下:
const Provider = props => {
const [state, origin_dispatch] = useReducer(reducer, initialState);
const dispatch = action => {
if (typeof action === "function") {
return action(origin_dispatch);
}
return origin_dispatch(action);
};
return (
<context.Provider value={{ state, dispatch }}>
{props.children}
</context.Provider>
);
};
我们将userReducer函数返回的原始dispath命名为origin_dispatch,自定义dispatch函数,当action为函数的时候,我们执行action函数,并将origin_dispatch当作参数传进去;action不是函数,直接调用origin_dispatch,不做处理
我们测试一下:
const sleep = wait => {
return new Promise(resolve => {
setTimeout(() => resolve(), wait);
});
};
const increaseCount = async dispatch => {
await sleep(1000);
dispatch({ type: "increase" });
};
<button
onClick={() => {
dispatch(increaseCount);
}}
>
increase
</button>
increaseCount是一个异步函数,我们将它当作参数传入我们封装的新dispatch中,点击increase按钮,1s之后,计数器的数字加1,至此,我们的context-redux也支持dispatch异步操作了
本文的代码,我放在了自己的github上,这是传送门
来自:https://github.com/Bowen7/Blog/issues/7
近日,据 MIT Technology Review 报道,一位名为“Repairnator”的机器人在 GitHub 上“卧底”数月,查找错误并编写和提交修复补丁,结果有多个补丁成功通过并被采纳,这位 Repairnator 到底是如何拯救程序员于水火的呢?
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗?你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?你在还在为组件中的this指向而晕头转向吗?这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张。
使用useEffect 就像瑞士军刀。它可以用于很多事情,从设置订阅到创建和清理计时器,再到更改ref的值。与 componentDidMount、componentDidUpdate 不同的是,在浏览器完成布局与绘制之后,传给 useEffect 的函数会延迟调用。
从 React Hooks 正式发布到现在,我一直在项目使用它。但是,在使用 Hooks 的过程中,我也进入了一些误区,导致写出来的代码隐藏 bug 并且难以维护。这篇文章中,我会具体分析这些问题,并总结一些好的实践,以供大家参考
Hooks 的 API 可以参照 React 官网。本文主要是结合 Demo 详细讲解如何用 Hooks 来实现 React Class Component 写法,让大家更深的理解 Hooks 的机制并且更快的入门。 注意:Rax 的写法和 React 是一致的
以下是上一代标准写法类组件的缺点,也正是hook要解决的问题,型组件很难拆分和重构,也很难测试。业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。
Hooks出来已经有段时间了,相信大家都用过段时间了,有没有小伙伴们遇到坑呢,我这边就有个 setInterval 的坑,和小伙伴们分享下解决方案。写个 count 每秒自增的定时器,如下写法结果,界面上 count 为 1 ?
对于 React 16.7 中新的 hooks 系统在社区中引起的骚动,我们都有所耳闻了。人们纷纷动手尝试,并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法,React 以某种甚至不用暴露其实例
9月份开始,使用了React16.8的新特性React Hooks对项目进行了重构,果然,感觉没有被辜负,就像阮一峰老师所说的一样,这个 API 是 React 的未来。
由于篇幅所限文章中并没有给出demo的所有代码,大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程,配合文章来看会比较清晰,从进公司前认识了TDD,到实践TDD
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!