Published on

React Hooks

Authors
  • avatar
    Name
    Et cetera
    Twitter

useCallback(fn, dependencies)

  • returns:

    • 在初始渲染中,useCallback 返回传递的 fn 函数

    • 在后续渲染期间,它将返回 fn 上次渲染中已存储的函数（如果依赖项未更改）,或者返回 fn 您在此渲染期间传递的函数

useCallback 性能优化的点:

当需要将一个函数传递给子组件时, 最好使用 useCallback 进行优化, 将优化之后的函数,传递给子组件,避免未使用该 props 的函数情况下触发子组件重新渲染(因为不使用情况下,父组件每次刷新都会重新创建该函数,从而影响传递给子组件的 props 触发子组件渲染)

useMemo()

  • 首先提一句 React.memo() 和 useMemo() 的主要区别
    • React.memo() 是一个高阶组件,我们可以使用它来包装我们不想重新渲染的组件,除非其中的 props 发生变化
    • useMemo() 是一个 React Hook,我们可以使用它在组件中包装函数。我们可以使用它来确保该函数中的值仅在其依赖项之一发生变化时才重新计算
    • 个人理解就是 useMemo()是针对自己依赖项以此进行缓存的 shallowEqul,从而控制组件渲染

useCallback()和 useMemo()

  • useCallback()存储的是传入的函数本身
  • useMemo()存储的是传入回调函数的返回值

useContext(someContext)用于数据传输

  • returns

useEffect(fn, dependencies)

useEffect.tsx
import React, { memo, useEffect } from 'react'
import { useState } from 'react'

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

  // 负责告知react, 在执行完当前组件渲染之后要执行的副作用代码
  useEffect(() => {
    // 当前传入的回调函数会在组件被渲染完成后, 自动执行
    // 1.监听事件
    // const unsubscribe = store.subscribe(() => {
    // })
    // function foo() {
    // }
    // eventBus.on("why", foo)
    console.log("监听redux中数据变化, 监听eventBus中的why事件")

    // 返回值: 回调函数 => 组件被重新渲染或者组件卸载的时候执行
    return () => {
      console.log("取消监听redux中数据变化, 取消监听eventBus中的why事件")
    }
  })

  return (
    <div>
      <button onClick={e => setCount(count + 1)}>+1({count})</button>
    </div>
  )
})

export default App

也就是 useEffect 可以在回调函数体里模拟类组件的 componentDidmount()生命周期,return 里的返回值则可以模拟类组件的componentDidUpdate()和componentWillUnmount()两个生命周期

View on GitHub