React 2023 年 7 月 10 日

探索 React Hook：提升 React 开发效率的核心知识点

在现代 Web 开发中，除了 Vue，angle，React 已成为最受欢迎和广泛使用的前端框架之一。而在 React 16.8 版本中，引入了一项重大的改进——React Hook。React Hook 是一种让函数组件具备状态管理和其他特性的新方式，它彻底改变了我们编写和组织 React 组件的方式。本文将深入探讨 React Hook 的核心知识点，帮助您更好地理解和应用这项强大的技术。

首先我们先来理解 React Hook 的背景和优势，React Hook 是在 React 16.8 版本中引入的一项重大改进。在传统的 React 类组件中，为了共享状态逻辑和处理副作用，我们需要使用复杂的生命周期方法、高阶组件或 render props 等方式来组织代码。这种方式可能导致组件间的代码分散且难以复用，同时增加了学习曲线和编写复杂组件的难度。

React Hook 的产生背景是为了简化和优化 React 组件的编写方式，它摒弃了类组件的复杂性，提供了函数式风格的开发体验。相较于传统的类组件，使用 Hook 有以下优势：更简洁、更直观、更易于推理和测试；方便地管理状态，避免了繁琐的代码和错误；灵活处理副作用，避免生命周期方法中的混乱；可复用的逻辑封装和共享；提供性能优化的工具。总之，React Hook 让我们能够以简单、清晰和高效的方式编写 React 组件。

常用 Hook

useState

useState 是 React 提供的一个 Hook，它用于在函数组件中添加状态管理。通过使用 useState，我们可以在函数组件中声明一个或多个状态变量，并能够对其进行读取和更新。它接收一个初始值作为参数，并返回一个包含状态变量和更新函数的数组。通过调用更新函数，我们可以更新状态变量的值，从而触发组件的重新渲染。

使用 useState 的好处是它简化了在函数组件中管理和更新状态的过程。我们不再需要编写类组件中的 constructor 和 setState 方法，以及手动维护组件的状态。相反，useState 使用起来更加简洁和直观，使得组件的状态管理更容易理解和维护。

import React, { useState } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default Example

useEffect

useEffect 也是 React 提供的一个 Hook，它用于处理副作用和模拟类组件的生命周期方法。副作用指在组件渲染期间发生的操作，比如数据获取、订阅事件、手动操作 DOM 等。在函数组件中，由于没有生命周期方法，我们无法在特定的时机执行这些操作。而 useEffect 正好解决了这个问题。

通过使用 useEffect，我们可以在函数组件中定义副作用函数，并在组件渲染时自动执行它。useEffect 接收两个参数：副作用函数和依赖数组。副作用函数会在组件渲染后执行，类似于 componentDidMount 和 componentDidUpdate。而依赖数组用于指定副作用函数的依赖项，只有当依赖项发生变化时，才会触发执行副作用函数。

使用 useEffect 可以使我们更好地控制和处理副作用逻辑，避免了在不同生命周期方法中拆分和重复代码的问题。它使得代码更具可读性和可维护性，并且提供了清理函数的机制，用于在组件销毁时执行一些必要的清理操作。

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

function Example() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('Component did mount')

    return () => {
      console.log('Component will unmount')
    }
  }, [])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Example

useRef

Hook 介绍：useRef 用于在函数组件中创建一个可变的引用值。它类似于类组件中的 ref，可以用来保存任意可变值，并且不会触发组件重新渲染。
代码示例

import React, { useRef } from 'react'

function Example() {
  const inputRef = useRef(null)

  const focusInput = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  )
}

export default Example

useContext

Hook 介绍：useContext 用于在函数组件中访问上下文（Context）的值。它接收一个上下文对象（通过 React.createContext 创建），并返回当前上下文的值。它使得在组件树中深层级的组件中能够方便地使用上下文数据。
代码示例

import React, { useContext } from 'react'

const ThemeContext = React.createContext('light')

function Example() {
  const theme = useContext(ThemeContext)

  return (
    <div>
      <p>Current theme: {theme}</p>
    </div>
  )
}

export default Example

useCallback

Hook 介绍：useCallback 用于在函数组件中缓存回调函数，以避免在每次渲染时重新创建新的回调函数。它接收一个回调函数和依赖数组，并返回一个记忆化后的回调函数。
代码示例：

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

function Example() {
  const [count, setCount] = useState(0)

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

export default Example

这些是一些常用的 React Hook 的介绍和代码示例：useRef 用于创建可变的引用值，useContext 用于访问上下文的值，useCallback 用于缓存回调函数。它们都可以帮助我们更好地在函数组件中管理状态、处理副作用和优化性能。

不常用的 Hook

useReducer

Hook 介绍：useReducer 用于在函数组件中实现复杂的状态管理。它类似于 Redux 中的 reducer，接收一个纯函数和初始状态，并返回当前状态和一个派发函数，用于触发状态更新。它适用于需要处理多个相关状态变化并具有复杂逻辑的场景。
代码示例：

import React, { useReducer } from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      throw new Error('Unexpected action')
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0 })

  const increment = () => {
    dispatch({ type: 'increment' })
  }

  const decrement = () => {
    dispatch({ type: 'decrement' })
  }

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

export default Example

useMemo

Hook 介绍：useMemo 用于在函数组件中进行性能优化，通过缓存计算结果来避免重复计算。它接收一个依赖数组和一个回调函数，并返回回调函数的结果。只有当依赖数组发生变化时，才会重新计算结果。
代码示例：

import React, { useMemo } from 'react'

function Example({ a, b }) {
  const result = useMemo(() => {
    // 复杂的计算逻辑
    return a * b
  }, [a, b])

  return (
    <div>
      <p>Result: {result}</p>
    </div>
  )
}

export default Example

useLayoutEffect

Hook 介绍：useLayoutEffect 与 useEffect 类似，用于处理副作用，但它在浏览器执行绘制之前同步调用副作用函数。这可以用于在更新 DOM 后立即进行一些操作，如测量元素布局或触发动画。
代码示例：

import React, { useLayoutEffect, useRef } from 'react'

function Example() {
  const ref = useRef(null)

  useLayoutEffect(() => {
    // 获取元素的布局信息并进行操作
    const width = ref.current.clientWidth
    console.log(`Width: ${width}px`)
  }, [])

  return (
    <div ref={ref}>
      <p>Example</p>
    </div>
  )
}

export default Example

这些是一些不太常用但仍然有用的 React Hook 的介绍和代码示例：useReducer 用于复杂的状态管理，useMemo 用于性能优化，useLayoutEffect 用于在绘制之前同步调用副作用函数。它们可以帮助我们处理更复杂的场景和优化性能需求。

总结

总结一下，React Hook 是 React 16.8 引入的一项重要特性，它可以让我们在函数组件中使用状态和其他 React 特性，避免了类组件的繁琐和重复。通过使用 React Hook，我们可以更方便地管理组件的状态、处理副作用、优化性能等。

常用的 React Hook 包括：

useState：用于在函数组件中管理状态；
useEffect：用于处理副作用，如异步请求、订阅事件等；
useContext：用于访问上下文的值；
useRef：用于创建可变的引用值；
useCallback：用于缓存回调函数。

较少使用但仍然有用的 React Hook 包括：

useReducer：用于复杂的状态管理；
useMemo：用于性能优化，根据依赖数组缓存计算结果；
useLayoutEffect：与 useEffect 类似，但在浏览器绘制前同步调用副作用函数。

使用 React Hook 可以使代码更简洁、易读和易于维护，而且不会改变 React 的基本理念。同时，我们需要注意在使用 Hook 时遵循其规则，如仅在顶层调用 Hook、依赖数组的正确使用等，以确保正确使用和避免潜在的问题。

本文同步我的技术文档

作者：吃个甘蔗嚼一年发表日期：2023 年 7 月 10 日