react基础之reactHooks

文章目录

    • [React Hooks 使用指南](#React Hooks 使用指南)
    • 小结

React Hooks 使用指南

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

常用 Hooks
  1. 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>
        );
    }
  2. 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>
        );
    }
  3. 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>
        );
    }
  4. 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>
        );
    }
  5. 自定义 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 };
    }
使用规则
  1. 只能在函数组件或自定义 Hook 中调用:避免在常规 JavaScript 函数中使用。

  2. 必须在顶层调用:避免在循环、条件语句或嵌套函数中调用,确保每次渲染都以相同的顺序调用 Hooks。

  3. 依赖数组 :在 useEffect 和其他 Hooks 中,依赖数组用于控制副作用的执行时机,确保正确管理状态和性能。

小结

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

您好,我是肥晨。

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

相关推荐
萌萌哒草头将军4 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫14 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊5 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿5 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj5 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝5 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3115 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion5 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜5 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf