React Hooks 深入解析

引言

React Hooks 是在 React 16.8 引入的新特性，它允许我们在函数组件中使用 state 和其他 React 特性，而不必编写 class 组件。本文将深入探讨 React Hooks 的用法和原理。

useState

useState 是最基本的 Hook，它允许我们在函数组件中添加状态。

import React, {
    useState } from 'react';

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

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

useEffect

useEffect 用于执行副作用，例如数据获取或直接修改 DOM。它在组件渲染后运行，并在下一次渲染前清理副作用。

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

function DataFetchingComponent() {
   
    const [data, setData] = useState(null);

    useEffect(() => {
   
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []); // 空数组表示这个 effect 只在挂载和卸载时运行

    return (
        <div>
            {
   data ? <p>{
   JSON.stringify(data)}</p> : <p>Loading...</p>}
        </div>
    );
}

useContext

useContext 允许我们无需通过层层组件传递 props 即可访问上下文。

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

const ThemeContext = createContext();

export function ThemeProvider({
    children }) {
   
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={
   {
    theme, setTheme }}>
            {
   children}
        </ThemeContext.Provider>
    );
}

function ThemedButton() {
   
    const {
    theme } = useContext(ThemeContext);

    return <button style={
   {
    background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#333' : '#fff' }}>Click me</button>;
}

结论

React Hooks 提供了一种更简洁、更灵活的方式来编写 React 组件，使得函数组件能够拥有与 class 组件相同的功能。通过合理使用 Hooks，我们可以写出更清晰、更易于维护的代码。