(一)需要

最近在学习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
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)