React Hooks 深入理解与应用

前言

React Hooks 改变了函数式组件的开发方式。通过 Hooks，我们可以在不编写 Class 的情况下使用状态和其他 React 特性。本文深入讲解 Hooks 的各种应用。

一、基础 Hooks

1.1 useState

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        增加
      </button>
    </>
  )
}

1.2 useEffect

import { useEffect, useState } from 'react'

function DataFetcher() {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  
  useEffect(() => {
    fetchData().then(res => {
      setData(res)
      setLoading(false)
    })
  }, []) // 空依赖数组表示仅在挂载时执行
  
  return loading ? <div>加载中...</div> : <div>{data}</div>
}

二、高级 Hooks

2.1 useContext

import { createContext, useContext } from 'react'

const ThemeContext = createContext()

function ThemedComponent() {
  const theme = useContext(ThemeContext)
  return <div style={{ color: theme.color }}>主题化组件</div>
}

2.2 useReducer

const initialState = { count: 0 }

function reducer(state, action) {
  switch(action.type) {
    case 'INCREMENT': return { count: state.count + 1 }
    case 'DECREMENT': return { count: state.count - 1 }
    default: return state
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState)
  
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        +
      </button>
    </>
  )
}

三、性能优化

3.1 useMemo

import { useMemo } from 'react'

function ExpensiveComponent({ items }) {
  const sortedItems = useMemo(
    () => items.sort((a, b) => a - b),
    [items]
  )
  
  return <div>{sortedItems.map(item => <span key={item}>{item}</span>)}</div>
}

3.2 useCallback

import { useCallback } from 'react'

function Parent() {
  const handleClick = useCallback(() => {
    console.log('clicked')
  }, [])
  
  return <ChildComponent onClick={handleClick} />
}

四、自定义 Hooks

创建可复用的逻辑通过自定义 Hooks。

function useFormInput(initialValue = '') {
  const [value, setValue] = useState(initialValue)
  
  return {
    value,
    setValue,
    bind: {
      value,
      onChange: e => setValue(e.target.value)
    },
    reset: () => setValue(initialValue)
  }
}

function FormComponent() {
  const name = useFormInput('')
  
  return (
    <>
      <input {...name.bind} />
      <button onClick={name.reset}>重置</button>
    </>
  )
}

五、常见陷阱

• 不要在循环、条件或嵌套函数中调用 Hooks
• 只在函数式组件中使用 Hooks
• 正确设置依赖数组以避免无限循环
• 避免在依赖数组中使用对象字面量

总结

React Hooks 提供了更优雅的方式来组织组件逻辑。掌握这些核心 Hooks 和最佳实践，能够开发出高效、可维护的 React 应用。