react hooks--useReducer

概述

很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是

useReducer仅仅是useState的一种替代方案:

  •  在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;
  •  或者这次修改的state需要依赖之前的state时,也可以使用;

基本用法

useReducer仅仅是useState的一种替代方案:

 在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;

 或者这次修改的state需要依赖之前的state时,也可以使用

数据是不会共享的,它们只是使用了相同的counterReducer的函数而已。

所以,useReducer只是useState的一种替代品,并不能替代Redux

useReducer 接受一个 reducer 函数作为参数,reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath,count 是返回状态中的值,而 dispatch 是一个可以发布事件来更新 state 的

语法:

复制代码
const [state, dispatch] = useReducer(reducer, initialArg, init);

state:组件内部的数据,更改后也会引起组件的渲染

dispatch:和redux中dispatch功能是类似的,也是需要派发一个action通知reducer更新数据。

特别说明:

useState的替代方案接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法

在某些场景下,useReducer 会比 useState 更适用,例如 state 逻辑较复杂且包含多个子值,或者下一个 state 依赖于之前的 state 等。并且,使用 useReducer 还能给那些会触发深更新的组件做性能优化,因为你可以向子组件传递 dispatch 而不是回调函数

useReducer相当于一个简化版的redux。

演示示例

App.js

复制代码
import React from 'react'
import UseFun from './components/UseFun'
import CountFun from './components/CountFun'
import UseReducer from './components/UseReducer'

export default function App() {
  let msg = '132'
  return (
    <div>
      <UseReducer />
    </div>
  )
}

components/UseReducer.jsx

复制代码
import React from 'react'
import { useReducer } from 'react';

const intiState = {
  count: 0
}

const reducer = (state, action) => {
  switch(action.type) {
    case 'add':
      state.count += action.payload.num
      return {
        ...state,
        count: state.count
      }
      case 'reduce':
        state.count -= action.payload.num;
        return JSON.parse(JSON.stringify(state))
    default: return state;
  }
}

export default function UseReducer(props) {
  const [state, dispatch] = useReducer(reducer, intiState)

  // 增加
  const addCount = () => {
    dispatch({
      type: 'add',
      payload: {
        num: 10
      }
    })
  }

  // 减少
  const reduceCount = () => {
    dispatch({
      type: 'reduce',
      payload: {
        num: 2
      }
    })
  }

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={addCount}>增加count</button>
      <button onClick={reduceCount}>减少count</button>
    </div>
  )
}

如果发现操作reducer数据时,计算了两次,那么你需要考虑将数据深拷贝出来进行单独操作,不要对state中的数据进行修改。

总结

const [state, dispatch] = useReducer(reducer, initialArg, init); useState 的替代方案,它接收一个 (state, action) => newState 的 reducer 处理函数,并返回当前的 state 和 配套 的 dispatch 方法。使用方法与 redux 非常相似。 某些场景下,useReducer 比 useState 更加适用: 当状态变量比较复杂且包含多个子值的时候 下一个 state 依赖之前的 state

相关推荐
前端 贾公子9 分钟前
Monorepo + vite 怎么热更新
前端
coding随想18 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB242 小时前
html复习
javascript·microsoft·html