React Hooks：你需要知道的必备 Hooks 💡

# Web 开发 # JavaScript # 编程 # React

React Hooks 改变了开发人员构建和管理组件的方式。通过提供一种简洁、实用的方式来处理状态、副作用和其他功能，Hooks 已成为现代 React 开发的重要组成部分。在本博客中，我们将探讨每个 React 开发人员都应该掌握的最常用 Hooks，以及展示其实际应用的实例。

索引 📖

useState 📊

使用效果 ⌚

useContext 🔐

useRef 🔄

useReducer 🔄

你在备忘录中🎨

useCallback 🔁

1. useState 📊

`useState` 钩子是管理功能组件中状态的基石。它允许您以简单的声明方式添加和更新本地状态。

示例：带有本地存储的计数器组件

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

function Counter() {
  const [count, setCount] = useState(() => {
    const saved = localStorage.getItem('count');
    return saved ? parseInt(saved, 10) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return (
    
      Count: {count}
      
    
  );
}

为什么要使用它？与持久存储无缝集成，使其成为保存用户进度的理想选择。

2. useEffect ⌚

`useEffect` 钩子是处理副作用（如获取数据、订阅事件或更新 DOM）的强大方法。它取代了生命周期方法（如 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount`）。

示例：轮询 API 数据

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

function LiveScores() {
  const [scores, setScores] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      fetch('https://api.example.com/scores')
        .then(response => response.json())
        .then(data => setScores(data));
    }, 5000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return (
    
      {scores.map(score => (
        {score.team}: {score.points}
      ))}
    
  );
}

为什么要使用它？有效管理实时应用程序的定期更新。

3. useContext 🔐

`useContext` 钩子提供了一种在功能组件中直接访问上下文值的方法，而无需 `Context.Consumer` 包装器。

示例：用户身份验证

import React, { useContext } from 'react';
import { AuthContext } from './AuthProvider';

function UserProfile() {
  const { user } = useContext(AuthContext);

  return (
    
      Welcome, {user.name}!
      Email: {user.email}
    
  );
}

function App() {
  const user = { name: 'Taylor', email: 'taylor@example.com' };

  return (
    
      
    
  );
}

为什么要使用它？非常适合管理用户会话和其他全局状态。

4. useRef🔄

`useRef` 钩子提供了一种在渲染过程中保留值而不导致重新渲染的方法。它通常用于访问 DOM 元素或存储可变值。

示例：防抖输入

import React, { useRef, useState } from 'react';

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');
  const timeoutRef = useRef(null);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);

    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(() => {
      onSearch(value);
    }, 500); // Debounce time
  };

  return ;
}

为什么要使用它？优化搜索或实时过滤场景中的性能。

5. useReducer

当状态管理变得更加复杂时，`useReducer` 钩子是 `useState` 的替代方案。它对于管理具有多个操作的状态特别有用。

例如：购物车

import React, { useReducer } from 'react';

function cartReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, action.item];
    case 'remove':
      return state.filter(item => item.id !== action.id);
    default:
      throw new Error('Unknown action');
  }
}

function Cart() {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addItem = (item) => dispatch({ type: 'add', item });
  const removeItem = (id) => dispatch({ type: 'remove', id });

  return (
    
      Shopping Cart
      
        {cart.map(item => (
          
            {item.name} 
          
        ))}
      
      
    
  );
}

为什么要使用它？在电子商务或表单繁多的应用中干净利落地处理复杂的状态转换。

6. 您已加入 Memo 🎨

`useMemo` 钩子通过记忆昂贵的计算来帮助优化性能。它仅在依赖项发生变化时重新计算值。

示例：过滤大数据

import React, { useMemo, useState } from 'react';

function LargeList({ items }) {
  const [query, setQuery] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(query));
  }, [items, query]);

  return (
    
       setQuery(e.target.value)}
      />
      
        {filteredItems.map((item, index) => (
          {item}
        ))}
      
    
  );
}

为什么要使用它？提高包含数千行的列表或表格的性能。

7. useCallback 🔁

`useCallback` 钩子会记住回调函数，以避免每次渲染时不必要地重新创建。在将回调传递给子组件时，它特别有用。

示例：优化子项渲染

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

function Child({ onClick }) {
  console.log('Child rendered');
  return ;
}

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

  const increment = useCallback(() => setCount((prev) => prev + 1), []);

  return (
    
      Count: {count}
      
    
  );
}

为什么要使用它？通过最小化子组件的重新渲染来防止性能瓶颈。

结论

React hooks 提供了强大的工具来管理状态、副作用、性能优化等。掌握这些 hooks（useState、useEffect、useContext、useRef、useReducer、useMemo 和 useCallback）将使您能够编写更简洁、更高效的 React 应用程序。

开始将这些钩子纳入到您的项目中并观察您的 React 技能提升到一个新的水平！

CLIS.CC