当前位置: 首页 > news >正文

react基础之reactHooks

在这里插入图片描述

文章目录

    • React Hooks 使用指南
        • 常用 Hooks
        • 使用规则
    • 小结


React Hooks 使用指南

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

常用 Hooks
  1. useState
    用于在函数组件中添加状态。

    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
    处理副作用(如数据获取、订阅等)。

    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
    共享数据的上下文。

    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
    管理复杂状态。

    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
    创建可复用的逻辑。

    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 的重要基础,可以使函数组件变得更加强大和灵活。

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

http://www.lryc.cn/news/473449.html

相关文章:

  • Java基础0-Java概览
  • SW绘制曲面
  • css知识点梳理2
  • 攻防世界 MISC miao~详解
  • 使用 `tracert [options] <目标地址>` 命令的详细介绍
  • 闲一品交易平台:SpringBoot技术的新境界
  • 【深入浅出】深入浅出transformer(附面试题)
  • 苹果重大更新,macOS与iOS同时推出更新!功能真好用
  • 刘艳兵-DBA016-在您的数据库中,SALES表存在于SH用户中,并且启用了统一审计。作为DBA,您成功执行了以下指令:
  • 力扣题目解析--整数反转
  • 净水前置需要安装吗?
  • 在深度学习研究方向有哪些创新点
  • YOLOv11改进策略【卷积层】| 2024最新轻量级自适应提取模块 LAE 即插即用 保留局部信息和全局信息
  • 工作转型与个人突破提升:如何在社会浪潮中激流勇进
  • mongodb:增删改查和特殊查询符号手册
  • 你的Mac book多久没有清洁键盘屏幕了,Mac清洁好帮手来了
  • ANA基因组数据库(ANAgdb)
  • leetcode 704 二分查找
  • Vue学习笔记(十一)
  • ABAP进阶学习1:动态内表1-通过系统表LVC_T_FCAT类型定义内表
  • 【Vispy库】一个用于高性能交互式2D/3D数据可视化库 Python库
  • 为什么 C 语言数组是从 0 开始计数的?
  • matlab线性度计算程序
  • 为什么NMOS管比PMOS管更受欢迎?
  • 【论文复现】短期电力负荷
  • pytest脚本常用的执行命令
  • OpenCv入门
  • 超详细的flex教程(面试必考)
  • C++的输入与输出
  • 上海剧某文化传播有限公司与喜某(上海)网络科技有限公司、上海喜某科技有限公司侵害著作权及不正当竞争纠纷案