(一)需要
最近在学习React,学到了React Hook 做了 useReducer Demo。
(二)介绍
应用useReducer
是为了不便状态治理,用法和Redux特地像。
/* * @Author: ArdenZhao * @Date: 2022-04-18 17:26:35 * @LastEditTime: 2022-04-18 18:09:53 * @FilePath: /react-ts/src/components/react/10-Hook-useReducer.js * @Description: file information */import { useReducer } from 'react';import { Button } from 'antd';import "antd/dist/antd.css";// 扭转的办法const reducer = (state, action) => { switch (action.type) { case 'add': // console.log('[ state ] >', state, { ...state }) return { ...state, count: state.count + 1 }; case 'minus': return { ...state, count: state.count - 1 }; default: return state; }}// 定义对象let initialState = { count: 10, name: "reducer" }//初始化办法const init = initialState => { return { name: "reducer", count: initialState.count + 2 }; // 初始化}function HookUseReducer(props) { // useReducer const [state, dispatch] = useReducer(reducer, initialState, init); return ( <div> <h1>Learn, {props.name}</h1> <p>计数器:{state.count}-{state.name}</p> <Button onClick={() => dispatch({ type: 'add' })}>加+</Button> <Button onClick={() => dispatch({ type: 'minus' })}>减-</Button> </div> );}export default HookUseReducer
写在最初的话
学习路上,经常会懈怠。
《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy...
如果有须要的搭档,能够加我微信:learningisconnecting
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)