React-Hooks中的useReducer
React Hooks
2023-09-11 14:17:56 时间
用来践行Flux/Redux的思想
一共分为四步:
- 创建初始值initialState
const initial = {
n:0
}
- 创建所有操作
reducer(state,action)
const reducer = (state ,action)=>{
if(action.type === 'add'){
return{n:state.n+1}//+1操作
}else if(action.type === 'mult'){
return{n:state.n*2 } //*2操作
}else{
throw new Error ( 'unknown type' )
//type错误时报错
}
}
-
传给useReducer,得到读和写的API
-
调用写API,传入参数
({type:'操作类型'})
function App(){
const [ state,dispatch ] = useReducer( reducer, initial )
const {n} = state
const onClick = ()=>{
dispatch({type:'add'})
}
return(
<div className='app'>
<h1>n: {n}</h1>
<button onClick={onClick}>+1</button>
</div>
)
}
总的来说,useReducer是useState的复杂版
作者:卷毛肥宅
链接:https://juejin.cn/post/6878099754690019335
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- [转] babel-plugin-react-css-modules配置
- vue/react框架中关于组件信息通信引发的面试题
- react hook 练手
- React Hooks介绍和环境搭建(一)
- React-Native 之 GD (二十一)APP 打包
- React Native商城项目实战13 - 首页中间上部分内容
- react-native 常见操作 及 git 补充
- React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
- 实战build-react(二)-------引入Ant Design(增加)
- vue3组合式api 和 react自定义hooks
- react native断点调试--Debug React-Native with VSCode
- react事件回调函数传递参数:绑定事件传参
- useMemo优化React Hooks程序性能,解决子组件重复执行问题
- react-native-scrollable-tab-view组件的简单使用
- react用脚手架创建一个react单页面项目,react起手式
- 【一天时间|React Hooks】在 React 项目中全量使用 Hooks
- React:声明组件的方式,看这篇就够了