关于javascript:Day-42100-React-Hook之useReducer基本用法

47次阅读

共计 1145 个字符，预计需要花费 3 分钟才能阅读完成。

最近在学习 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…