相信前期使用过 React 的前端同学,大都会经历从 class 语法向 hooks 用法的转变,react 的 hooks 编程给我们带来了丝滑的函数式编程体验,同时很多前端著名的文章也讲述了 hooks 带来的前端心智的转变,这里就不再着重强调,本文则是聚焦于 useReducer 这个钩子函数的原理和用法,笔者带领大家再一次深入认识 useReducer。
useReducer 是 useState 的替代方案,主要用来处理一些逻辑比较复杂的 state 或 下一个 state 依赖于前一个 state 等。 Example:使用 useReducer 重写上面的计数器示例,可以和上面的 useState 做一个对比。 复制 import{useReducer}from"react"constCOUNT_INCREMENT='COUNT_INCREMENT';constCOUNT_DECREMENT='COUNT_DECREMEN...
使用useReducer,我们可以将复杂的状态逻辑分解为更小的、易于管理的部分: function reducer(state, action) {switch (action.type) {case 'increment':return { ...state, count: state.count + 1 };case 'decrement':return { ...state, count: state.count - 1 };default:return state;}}function Exampl...
状态更新逻辑封装:useReducer通过reducer函数来封装状态更新逻辑。 返回值:useReducer返回当前状态和一个用于更新状态的dispatch函数。 import React, { useReducer } from 'react'; function Example() { const [state, dispatch] = useReducer(reducer, { count: 0 }); return ( <> Count: {state.count} dispa...
const [state, dispatch] = useReducer(reducer, initialCount, initFunc); 当initialCount变量不为0的时候,赋值为0;并返回count的赋值对象。注意第三个参数是一个函数,并不是一个对象或者数组,函数中可以返回对象。 dispatch 函数 dispatch函数是触发不同action的函数,通常的它是接受含有type的一个对象,并根据这个ty...
在React中,useReducer接收一个返回单组值的reducer函数,就像下面这样: const [count, dispatch] = useReducer(reducer, initialState); 前面提到过,这里的reducer函数本身会接受两个参数,第一个是state,第二个是action,这个action会被dispatch执行,就像是:
示例代码地址:https://github.com/qufei1993/react-state-example/tree/usereducer-usecontext-todos。 Context 小结 useState/useReducer 管理的是组件的状态,如果子组件想获取根组件的状态一种简单的做法是通过 Props 层层传递,另外一种是把需要传递的数据封装进 Context 的 Provider 中,子组件通过 useContext 获取来实...
React 中hooks之useReducer使用场景和方法总结 1. useReducer 基本概念 useReducer 是 React 的一个 Hook,用于管理复杂的状态逻辑。它接收一个 reducer 函数和初始状态,返回当前状态和 dispatch 函数。 1.1 基本语法 const [state, dispatch] = useReducer(reducer, initialState, init);...
2.2 使用useReducer Hook useReducerHook接收reducer函数和初始状态作为参数,并返回一个数组,包含当前状态和一个dispatch函数。dispatch函数用于触发动作,从而改变状态。 import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { ...
为了让我们更好的理解useReducer 的用法,这里创建一个登陆组件,并比较一下使用useState 和 useReducer 在状态管理用法上的异同。 首先我们先用useState创建登陆组件: importReact, { useState }from'react';exportdefaultfunctionLoginUseState() {const[username, setUsername] =useState('');const[password, setPassword...