React18之性能优化相关API(学习笔记)

useReducer

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

基础用法

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

image.png

分派action时传参

image.png

useReducer-小结

image.png

useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

看个需求：

image.png

count2变化时，会触发组件重新渲染，从而触发fn重新执行。使用useMemo可以避免出现这种情况。

基础语法

image.png

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

React.memo

作用：允许组件在Props没有改变的情况下跳过渲染
React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

image.png

思考：如果Son组件本身并不需要做渲染更新，是不是存在浪费？

基础语法

image.png

说明：经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染

import { memo, useState } from "react"

const MemoSon = memo(function Son () {
  console.log('我是子组件，我重新渲染了')
  return <div>this is son</div>
})

function App () {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>+{count}</button>
      {/* <Son /> */}
      <MemoSon />
    </div>
  )
}

props的比较机制

机制: 在使用memo缓存组件之后，React会对每一个 prop 使用 Object.is 比较新值和老值，返回true，表示没有变化
prop是简单类型：
Object.is(3, 3) => true 没有变化
prop是引用类型（对象 / 数组）：
Object.is([], []) => false 有变化，React只关心引用是否变化

useCallback

作用：在组件多次重新渲染的时候缓存函数

image.png

基础语法

image.png

说明：使用useCallback包裹函数之后，函数可以保证在App重新渲染的时候保持引用稳定

forwardRef和useInperativeHandle

作用：forwardRef使用ref暴露DOM节点给父组件，useInperativeHandle通过ref暴露子组件中的方法

场景说明

image.png

import { forwardRef, useImperativeHandle, useRef } from "react"

// 子组件
const Son = forwardRef((props, ref) => {
  // 实现聚焦逻辑
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }

  // 把聚焦方法暴露出去
  useImperativeHandle(ref, () => {
    return {
      // 暴露的方法
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})

// 父组件
function App () {
  const sonRef = useRef(null)
  const focusHandler = () => {
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={focusHandler}>focus</button>
    </>
  )
}

export default App