React useReducer終極使用教程

更新時(shí)間：2022年10月18日 14:18:46 作者：月光曬了很涼快

useReducer是在react V16.8推出的鉤子函數(shù)，從用法層面來說是可以代替useState。相信前期使用過 React 的前端同學(xué)，大都會(huì)經(jīng)歷從class語法向hooks用法的轉(zhuǎn)變，react的hooks編程給我們帶來了絲滑的函數(shù)式編程體驗(yàn)

1. 概述

useReducer 這個(gè) Hooks 在使用上幾乎跟 Redux 一模一樣，唯一缺點(diǎn)的就是無法使用 redux 提供的中間件。

使用 hook 函數(shù)后，一般情況下，一個(gè)組件組中的數(shù)據(jù)我們可以用 useReducer 來管理，而不是用 redux 來完成，redux 一般存儲(chǔ)公用數(shù)據(jù)，而不是把所有的數(shù)據(jù)都存儲(chǔ)在里面，redux 它是一個(gè)單一數(shù)據(jù)源，如果存儲(chǔ)多個(gè)數(shù)據(jù)的話，性能會(huì)降低。

2. useReducer使用

import React, { useReducer } from 'react'
// useReducer 它就是一個(gè)小型的redux，它幾乎和redux是一樣的，也可以管理數(shù)據(jù)
// 初始化數(shù)據(jù)
const initState = {
  count: 100
}
// reducer純函數(shù)中的state無需在定義函數(shù)時(shí)指定初始值，initState 會(huì)賦值給 reducer
// const reducer = (state,action)=>{}
// type, payload 是從 action 中結(jié)構(gòu)出來的
const reducer = (state, { type, payload }) => {
  if (type === 'add') {
    return { ...state, count: state.count + payload }
  }
  return state
}
const App = () => {
  // state 它就是初始化后數(shù)據(jù)的對(duì)象，狀態(tài)
  // dispatch 它就是用來發(fā)送指令讓reducer來修改state中的數(shù)據(jù)
  // reducer它就是一個(gè)純函數(shù)，用來修改initState初始化后數(shù)據(jù)狀態(tài)函數(shù)
  // initState 初始化數(shù)據(jù)
  const [state, dispatch] = useReducer(reducer, initState)
  const addCount = () => {
    // 數(shù)據(jù)以改變就會(huì)觸發(fā) useReducer 中的 reducer 函數(shù)
    dispatch({ type: 'add', payload: 2 })
  }
  return (
    <div>
      <h3>App組件 -- {state.count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

useReducer 的惰性初始化：

import React, { useReducer } from 'react'
const initState = {
  count: 100
}
const reducer = (state, { type, payload }) => {
  if (type === 'add') {
    return { ...state, count: state.count + payload }
  }
  return state
}
const App = () => {
  // initState 初始化數(shù)據(jù)
  // 如果useReducer它有第3個(gè)參數(shù)，則第2個(gè)參數(shù)就沒有意義，它以第3個(gè)參數(shù)優(yōu)先，第3個(gè)參數(shù)，惰性初始化，提升性能
  // 第3參數(shù)它是一個(gè)回調(diào)函數(shù)且一定要返回一個(gè)對(duì)象數(shù)據(jù),當(dāng)然你也可以直接返回一個(gè)值也可以，不建議
  const [state, dispatch] = useReducer(reducer, null, () => ({ count: 2000 }))
  const addCount = () => {
    dispatch({ type: 'add', payload: 2 })
  }
  return (
    <div>
      <h3>App組件 -- {state.count}</h3>
      <button onClick={addCount}>++++</button>
    </div>
  );
}
export default App;

注意：惰性初始化可以提升性能，惰性初始化使得數(shù)據(jù)不會(huì)在一開始就進(jìn)行初始化，而是在使用的時(shí)候再進(jìn)行初始化。

3. 使用useReducer完成todolist列表功能

reducer.js：

// 導(dǎo)出初始化數(shù)據(jù)
export const initState = {
  // 任務(wù)列表數(shù)據(jù)源
  todos: []
}
// 導(dǎo)出用于操作當(dāng)前todos任務(wù)列表的純函數(shù)
export const reducer = (state, { type, payload }) => {
  // [...state.todos, payload] 追加數(shù)據(jù)
  if ('add' === type) return { ...state, todos: [...state.todos, payload] }
  if ('del' === type) return { ...state, todos: state.todos.filter(item => item.id != payload) }
  return state
}

父組件（App.jsx）：

import React from 'react';
import Todo from './Todo';
const App = () => {
  return (
    <div>
      <Todo />
    </div>
  );
}
export default App;

ToDo組件：

import React, { useReducer } from 'react'
import Form from './components/Form'
import List from './components/List'
// 導(dǎo)入 reducer 文件中的初始化數(shù)據(jù)和操作數(shù)據(jù)函數(shù)
import { initState, reducer } from './reducer'
const Todo = () => {
  const [{ todos }, dispatch] = useReducer(reducer, initState)
  return (
    <div>
      {/* 表單項(xiàng) */}
      <Form dispatch={dispatch} />
      {/* 任務(wù)項(xiàng) */}
      <List dispatch={dispatch} todos={todos} />
    </div>
  )
}
export default Todo

表單項(xiàng)組件：

import React from 'react'
// 表單項(xiàng)組件
const Form = ({ dispatch }) => {
  // 回車事件
  const onEnter = evt => {
    if (evt.keyCode === 13) {
      const title = evt.target.value.trim()
      // todo每項(xiàng)中的數(shù)據(jù)
      const todo = {
        id: Date.now(),
        title,
        done: false
      }
      dispatch({ type: 'add', payload: todo })
      evt.target.value = ''
    }
  }
  return (
    <div>
      <input onKeyUp={onEnter} />
    </div>
  )
}
export default Form

任務(wù)項(xiàng)組件：

import React from 'react'
// 任務(wù)項(xiàng)組件
const List = ({ todos, dispatch }) => {
  const del = id => {
    dispatch({ type: 'del', payload: id })
  }
  return (
    <div>
      <h3>任務(wù)項(xiàng)</h3>
      <hr />
      <ul>
        {todos.map(item => (
          <li key={item.id}>
            <span>{item.title}</span>
            <span onClick={() => del(item.id)}>刪除</span>
          </li>
        ))}
      </ul>
    </div>
  )
}
export default List