链接:

文档链接

.

useReducer

很多人看到

useReducer

的第一反应应该是

redux

的替代品，其实并不是；


useReducer

仅仅是

useState

的一种替代方案；

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

useReducer的基本使用

function counterReducer (state,action){
  switch (action.type) {
    case "increment":
      return {...state,counter:state.counter+action.speed}
      case "decrement":
        return {...state,counter:state.counter-action.speed}
    default:
      return state;
  }
}
export default function App() {
  let [state,dispath]=useReducer(counterReducer,{counter:96})
  return (
    <div>
      <h2>你好-{state.counter}</h2>
      <button onClick={()=>{
        dispath({type:'increment',speed:2})
      }}>+</button>
      <button onClick={()=>{
        dispath({type:'decrement',speed:1})
      }}>-</button>
    </div>
  );
}

拆分useReducer方案一

单独创建一个

reducer/counter.js

文件；

export default counterReducer(state,action){
	switch(){
		case "increment":
			return {...state,counter:state.counter+1}
		case "decrement":
			return {...state,counter:state.counter-1}
		default:
			return state;
	}
}

home.js

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Home() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 100});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

我们来看一下，如果我们创建另一个

profile.js

也使用这个函数，是否进行数据的共享；

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'

export default function Profile() {
  const [state, dispatch] = useReducer(counterReducer, {counter: 0});

  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
    </div>
  )
}

拆分useReducer方案二

单独创建一个

useReducerText.jsx

文件；

import React,{useReducer} from 'react'
function counterReducer (state,action){
  switch (action.type) {
    case "increment":
      return {...state,counter:state.counter+action.speed}
      case "decrement":
        return {...state,counter:state.counter-action.speed}
    default:
      return state;
  }
}

export default function useReducerText() {
  const [state,dispath]=useReducer(counterReducer,{counter:9})
  return [state,dispath]
}

home.jsx

import React from 'react'
import useReducerText from '../useReducerText.jsx'
export default function Home() {
  let [state,dispatch]=useReducerText()
  return (
    <div>
      <p>{state.counter}</p>
      <button onClick={()=>{
        dispatch({
          type:'increment',
          speed:2
        })
      }}>+</button>
      <button  onClick={()=>{
        dispatch({
          type:'decrement',
          speed:1
        })
      }}>-</button>
    </div>
  )
}

about.jsx

import React from 'react'
import useReducerText from '../useReducerText.jsx'
export default function About() {
  let [state,dispatch]=useReducerText()
  return (
    <div>
      <p>{state.counter}</p>
      <button onClick={()=>{
        dispatch({
          type:'increment',
          speed:4
        })
      }}>+</button>
      <button  onClick={()=>{
        dispatch({
          type:'decrement',
          speed:2
        })
      }}>-</button>
    </div>
  )
}

由拆分方案一和方案二可知，数据是不会共享的，它们只是使用了相同的

counterReducer

的函数而已；


所以，useReducer只是useState的一种替代品，并不能替代redux