API

useState

用于再函数式组件中定义 state 变量

用法

import { useState } from 'react'

export const App = () => {
  const [state, setState] = useState(1)

  return (
    <>
      <div>{state}</div>
      <button onClick={() => setState(state + 1)}>增加</button>
    </>
  )
}

useStateFn

函数式状态

import { useState } from 'react'

export const App = () => {
  const [state, setState] = useState(() => 1)

  const add = () => {
    setState((num) => {
      console.log(num)
      return (num += 1)
    })
  }

  return (
    <>
      <div>{state}</div>
      <button onClick={add}>增加</button>
    </>
  )
}

useEffect

函数式组件没有生命周期，可以使用 useEffect，可以把它看作：组件加载、组件更新、组件卸载的三个生命周期的结合。所有的操作都可以在这里面做。

它在每次渲染完成之后，和更新之前都会执行一次

import { useState, useEffect } from 'react'

export const App = () => {
  const [state, setState] = useState(() => 1)

  useEffect(() => {
    document.title = `点击了${state}次`
  })

  const add = () => {
    setState((num) => {
      return (num += 1)
    })
  }

  return (
    <>
      <div>{state}</div>
      <button onClick={add}>增加</button>
    </>
  )
}

第二个参数可以传递一个数组，传递依赖项，如果传递空数组，就只会在组件加载的时候执行，也可以传递依赖项的配置，在依赖项改变之后执行

import { useState, useEffect } from 'react'

export const App = () => {
  const [state, setState] = useState(() => 1)

  useEffect(() => {
    document.title = `点击了${state}次`
  }, [state])

  const add = () => {
    setState((num) => {
      return (num += 1)
    })
  }

  return (
    <>
      <div>{state}</div>
      <button onClick={add}>增加</button>
    </>
  )
}

清除计时器

import { useState, useEffect } from 'react'

export const App = () => {
  const [state, setState] = useState(1)

  const timmer = useEffect(() => {
    setInterval(() => {
      setState((num) => num + 1)
    }, 1000)

    return () => clearInterval(timmer)
  }, [])

  return (
    <>
      <div>{state}</div>
    </>
  )
}

createRef

可以获取到 DOM 元素，每一次重新渲染都会创建一个新的 ref 对象

import { useEffect, createRef } from 'react'

export const App = () => {
  const inputRef = createRef()

  useEffect(() => {
    console.log(inputRef.current)
  })

  return (
    <>
      <input type="text" ref={inputRef} />
    </>
  )
}

useRef

可以获取到 DOM 元素，第一次渲染完成创建一个对象之后，之后重新渲染的时候，如果发现在这个对象创建过，就不会创建新的对象了，所以性能会好一些

import { useEffect, useRef } from 'react'

export const App = () => {
  const inputRef = useRef()

  useEffect(() => {
    console.log(inputRef.current)
  })

  return (
    <>
      <input type="text" ref={inputRef} />
    </>
  )
}

useReducer

useReducer 第一个参数是一个函数，第二个参数是初始值

import { useReducer } from 'react'

export const App = () => {
  const [state, dispatch] = useReducer((state, action) => {
    if (action === 'add') {
      return state + 1
    } else if (action === 'prev') {
      return state - 1
    }

    return state
  }, 0)

  return (
    <>
      <div>{state}</div>
      <button onClick={() => dispatch('add')}>增加</button>
      <button onClick={() => dispatch('prev')}>减少</button>
    </>
  )
}

useContext

向组件树深层传递数据，参考跨组件通信

useCallback

它的主要作用是避免在每次渲染时都重新创建函数。通过记住上一次创建的函数，只有在依赖项发生变化时才重新创建新的函数，从而提高性能

useMemo

通过记住上一次的计算结果，只有在依赖项发生变化时才重新计算，从而提高性能

第一个参数是一个函数，第二个参数是依赖数组，在依赖数组改变的时候会重新执行

useCallback 和 useMemo 的区别

用途：

• useCallback 主要用于避免在每次渲染时都重新创建函数。它会在依赖项发生变化时才重新创建新的函数，从而提高性能
• useMemo 主要用于避免在每次渲染时都进行复杂的计算和重新创建对象。它会在依赖项发生变化时才重新计算函数的返回值，从而提高性能

返回值

• useCallback 返回的是一个记住的函数。当依赖项发生变化时，它会返回一个新的函数
• useMemo 返回的是一个记住的计算结果。当依赖项发生变化时，它会返回重新计算的结果