react基础之reactHooks

文章目录

- [React Hooks 使用指南](#React Hooks 使用指南)
- - - [常用 Hooks](#常用 Hooks)
    - 使用规则
- 小结

React Hooks 使用指南

React Hooks 是 React 16.8 引入的一种新特性，允许在函数组件中使用状态和其他 React 特性，而无需编写类组件。以下是一些基础的 Hooks 及其使用规则。

常用 Hooks

useState

用于在函数组件中添加状态。

javascript 复制代码

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

useEffect

处理副作用（如数据获取、订阅等）。

javascript 复制代码

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

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

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

useContext

共享数据的上下文。

javascript 复制代码

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

const MyContext = createContext();

function MyComponent() {
    const value = useContext(MyContext);
    return <div>{value}</div>;
}

function App() {
    return (
        <MyContext.Provider value="Hello, World!">
            <MyComponent />
        </MyContext.Provider>
    );
}

useReducer

管理复杂状态。

javascript 复制代码

import React, { useReducer } from 'react';

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:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <div>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </div>
    );
}

自定义 Hook

创建可复用的逻辑。

javascript 复制代码

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, [url]);

    return { data, loading };
}

使用规则

只能在函数组件或自定义 Hook 中调用：避免在常规 JavaScript 函数中使用。
必须在顶层调用：避免在循环、条件语句或嵌套函数中调用，确保每次渲染都以相同的顺序调用 Hooks。
依赖数组 ：在 useEffect 和其他 Hooks 中，依赖数组用于控制副作用的执行时机，确保正确管理状态和性能。

小结

理解和掌握这些 Hooks 及其使用规则是使用 React 的重要基础，可以使函数组件变得更加强大和灵活。

您好，我是肥晨。

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。