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

相关推荐
IT_陈寒11 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
南城巷陌15 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip21 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙26 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
Rhys..31 分钟前
JS - npm init
开发语言·javascript·npm
夏天想34 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界41 分钟前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde1 小时前
【C++】深入理解string类(5)
java·前端·算法
袁煦丞1 小时前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作
携欢1 小时前
PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
运维·服务器·前端