个人技术分享

Appearance

Return to top
On this page

React Hooks 最佳实践

React Hooks 自推出以来，已经成为 React 开发的标准方式。本文将介绍一些 React Hooks 的最佳实践。

只在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hooks，这会导致 Hooks 的调用顺序不一致。

javascript
// 正确的做法
function Component() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')
  
  // 其他代码...
}

// 错误的做法
function Component() {
  if (condition) {
    const [count, setCount] = useState(0) // 不要这样做
  }
  // 其他代码...
}

使用自定义 Hooks 复用逻辑

将重复的逻辑提取到自定义 Hooks 中，提高代码复用性。

javascript
// 自定义 Hook
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key)
    return storedValue ? JSON.parse(storedValue) : initialValue
  })
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])
  
  return [value, setValue]
}

// 使用自定义 Hook
function Component() {
  const [name, setName] = useLocalStorage('name', '')
  // 其他代码...
}

依赖项数组的正确使用

确保 useEffect 的依赖项数组包含所有在效果中使用的变量。

javascript
// 正确的做法
function Component({ id }) {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetchData(id).then(setData)
  }, [id]) // 包含 id 作为依赖项
  
  // 其他代码...
}

// 错误的做法
function Component({ id }) {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetchData(id).then(setData)
  }, []) // 缺少 id 作为依赖项
  
  // 其他代码...
}

使用 useCallback 和 useMemo 优化性能

对于复杂的计算或回调函数，使用 useCallback 和 useMemo 来避免不必要的重新渲染。

javascript
function Component({ items }) {
  // 使用 useMemo 缓存计算结果
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0)
  }, [items])
  
  // 使用 useCallback 缓存回调函数
  const handleClick = useCallback(() => {
    console.log('Clicked')
  }, [])
  
  // 其他代码...
}

遵循这些最佳实践，可以编写更加清晰、高效的 React 代码。