沃梦达 / IT编程 / 前端开发 / 正文

React useCallback钩子的作用方法demo

沃梦达教程前端开发

2024-02-19 10

React的useCallback钩子是一个用于优化性能的Hooks。其作用是缓存一个函数引用，以便可以在渲染周期之间复用该函数。

React的useCallback钩子是一个用于优化性能的Hooks。其作用是缓存一个函数引用，以便可以在渲染周期之间复用该函数。

使用方法

useCallback接受两个参数:

一个需要缓存的函数
一个依赖项数组

当依赖项改变时，useCallback返回的缓存函数才会被重新计算。

示范1：使用useCallback优化子组件的渲染

在下面的示例中，我们将展示如何把一个使用Props传递函数的子组件优化为使用useCallback，以便可以避免每次渲染时都重新生成一个新的函数。

import React, { useCallback, useState } from 'react'
import ChildComponent from './ChildComponent'

const ParentComponent = () => {
  const [count, setCount] = useState(0)

  const handleClick = useCallback(() => {
    setCount(count + 1)
  }, [count])

  return (
    <div>
      <p>Clicked Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  )
}

export default ParentComponent

在这个示例中，当用户点击按钮时，handleClick函数将被调用。由于handleClick是被useCallback缓存的，因此每次渲染时都使用相同的函数，从而避免了每次渲染都重新生成一个新的函数。

示范2：使用useCallback优化useEffect返回的函数

在下面的示例中，我们将展示如何使用useCallback优化useEffect返回的函数，从而避免因为每次渲染都生成一个新的函数而导致不必要的重复运算。

import React, { useCallback, useEffect, useState } from 'react'

const ParentComponent = () => {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('')

  const handleChange = useCallback((e) => {
    setText(e.target.value)
  }, [])

  useEffect(() => {
    const handleTyping = () => {
      console.log(text)
    }

    window.addEventListener('keypress', handleTyping)

    return () => {
      window.removeEventListener('keypress', handleTyping)
    }
  }, [text])

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>Clicked Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

export default ParentComponent