黑马React：基础拓展

黑马React: D10-基础拓展

Date: December 18, 2023

---

useReducer

基础使用

作用: 让 React 管理多个相对关联的状态数据

补充：和useState的作用类似，用来管理相对复杂的状态数据

**特点：**useReducer返回值为一个数组, 可以解构处数值state与修改数值的方法dispatch（修改数值的唯一方法）

案例：

1. 定义一个reducer函数（根据不同的action返回不同的新状态）
2. 在组件中调用useReducer，并传入reducer函数和状态的初始值
3. 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI）

import { useReducer } from 'react'

// 1. 定义reducer函数，根据不同的action返回不同的新状态
function reducer(state, action) {
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
    </>
  )
}

export default App

---

---

更新流程

---

---

---

分派action传参

**做法：**分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数

// 定义reducer

import { useReducer } from 'react'

// 1. 根据不同的action返回不同的新状态
function reducer(state, action) {
  console.log('reducer执行了')
  switch (action.type) {
    case 'INC':
      return state + 1
    case 'DEC':
      return state - 1
    case 'UPDATE':
      return state + action.payload
    default:
      return state
  }
}

function App() {
  // 2. 使用useReducer分派action
  const [state, dispatch] = useReducer(reducer, 0)
  return (
    <>
      {/* 3. 调用dispatch函数传入action对象 触发reducer函数，分派action操作，使用新状态更新视图 */}
      <button onClick={() => dispatch({ type: 'DEC' })}>-</button>
      {state}
      <button onClick={() => dispatch({ type: 'INC' })}>+</button>
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 100 })}>
        update to 100
      </button>
    </>
  )
}

export default App

---

---

---

useMemo

**作用：**它在每次重新渲染的时候能够缓存计算的结果

语法：

useMemo(() => {
	// 根据 count1 返回计算的结果
}, [count1])

说明：使用 useMemo 做缓存之后可以保证只有 count1 依赖项发生变化时才会重新计算

**使用场景：**消耗非常大的计算可以使用 useMemo

使用技巧：

1-指这个空数组只会在组件渲染完毕之后执行一次，即只要这个固定的 [1, 2, 3] 稳定的数组引用

const list = useMemo(() => {
	return [1, 2, 3]
}, [])

---

看个场景

原本用意：想基于count1的变化计算斐波那契数列之和，但是当我们修改count2状态的时候，斐波那契求和函数也会被执行，显然是一种浪费

案例：

// useMemo
// 作用：在组件渲染时缓存计算的结果

import { useState } from 'react'

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  **const sum = factorialOf(count)**

  const [num, setNum] = useState(0)

  return (
    <>
      {sum}
      <button onClick={() => setCount(count + 1)}>+count:{count}</button>
      <button onClick={() => setNum(num + 1)}>+num:{num}</button>
    </>
  )
}

export default App

Res:

---

---

useMemo缓存计算结果

思路: 只有count发生变化时才重新进行计算

import { useMemo, useState } from 'react'

function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果，只有count发生变化时才重新计算
  **const sum = useMe