当前位置：首页 > article >正文

react hooks--useReducer

article 2024/11/17 16:16:14

概述

很多人看到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

查看全文

http://www.kler.cn/a/320980.html