32 常用Hooks详解

在上篇文章中，我们了解了React Hooks的基本概念以及它们如何使我们在函数组件中更方便地管理状态和副作用。本篇文章将深入探讨一些常用的内置Hooks，帮助您在实际项目中更有效地使用它们。

useState Hook

useState是最常用的Hook之一，它让我们能够在函数组件中引入状态。使用useState非常简单，它返回一个数组，包含当前的状态值和更新该状态的函数。

使用示例

import React, { useState } from 'react';

const Counter = () => {
    // 声明一个状态变量 count，初始值为 0
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>当前计数：{count}</p>
            <button onClick={() => setCount(count + 1)}>增加</button>
            <button onClick={() => setCount(count - 1)}>减少</button>
        </div>
    );
};

export default Counter;

在这个例子中，我们使用useState创建了一个名为count的状态，初始值为0。通过调用setCount函数，我们可以更新count的值。

useEffect Hook

useEffect允许我们在函数组件中执行副作用，比如数据获取、订阅以及手动DOM操作等。它的运行时机是组件渲染后。

使用示例

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

const DataFetcher = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => response.json())
            .then(json => {
                setData(json);
                setLoading(false);
            });
    }, []); // 空数组意味着只在组件挂载时执行一次

    if (loading) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <h1>{data.title}</h1>
            <p>{data.body}</p>
        </div>
    );
};

export default DataFetcher;

在这个例子中，我们使用useEffect来获取数据。当组件首次挂载时，它会调用API并更新状态。

useContext Hook

useContext使得我们可以在函数组件中轻松地访问React的上下文（Context）。这在跨多个组件传递数据时变得尤为重要，尤其是在深层嵌套结构中。

使用示例

首先，我们需要创建一个上下文，并在一个提供者组件中传递数据。

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

const ThemedComponent = () => {
    const theme = useContext(ThemeContext);
    
    return (
        <div style={{ background: theme === 'dark' ? '#333' : '#FFF', color: theme === 'dark' ? '#FFF' : '#000' }}>
            <p>当前主题是：{theme}</p>
        </div>
    );
};

const App = () => {
    return (
        <ThemeContext.Provider value='dark'>
            <ThemedComponent />
        </ThemeContext.Provider>
    );
};

export default App;

在这个例子中，ThemedComponent使用useContext来获取ThemeContext的值。通过ThemeProvider提供的上下文，我们能够在多个组件之间共享状态。

总结

在本篇教程中，我们探讨了useState、useEffect和useContext这三个常用的内置Hooks。通过灵活应用这些Hooks，我们能够在函数组件中更简单、更高效地管理状态和副作用。

接下来，我们将探索如何创建自定义Hooks，以满足更复杂的需求。这将增强您的React开发能力，使代码更加复用和模块化。