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

相关推荐
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图