【React】深入探索React:表单控制、组件通信、副作用管理、自定义Hook

一、React表单控制

表单控制是React应用中常见的需求,React Hooks提供了两种方式来实现:受控组件和非受控组件。

1.1 受控组件

受控组件是将表单输入的值保存在组件的状态中。这样,表单数据就完全由React控制。

import React, { useState } from 'react';function ControlledInput() {const [value, setValue] = useState('');const handleChange = (e) => {setValue(e.target.value);};return <input type="text" value={value} onChange={handleChange} />;
}

1.2 非受控组件

非受控组件不使用React的状态来控制输入值,而是通过直接操作DOM来获取输入值。

import React, { useRef } from 'react';function UncontrolledInput() {const inputRef = useRef(null);const handleChange = () => {console.log(inputRef.current.value);};return <input type="text" ref={inputRef} onChange={handleChange} />;
}

二、React组件通信

组件通信是React应用中另一个重要的概念,它允许不同组件之间进行数据交换。

2.1 父子通信

父子组件之间的通信可以通过props实现。

function ParentComponent() {const name = 'Parent Name';return <ChildComponent name={name} />;
}function ChildComponent(props) {return <div>{props.name}</div>;
}

2.2 子传父通信

子组件可以通过回调函数将数据传递给父组件。

function ParentComponent() {const getMsg = (msg) => console.log(msg);return <ChildComponent onGetMsg={getMsg} />;
}function ChildComponent({ onGetMsg }) {const handleClick = () => {onGetMsg('this is son msg');};return <button onClick={handleClick}>Send Message</button>;
}

2.3 兄弟组件通信

兄弟组件通信通常通过提升状态到它们共同的父组件来实现。

function ParentComponent() {const [name, setName] = useState('');const handleAName = (name) => {setName(name);};return (<><AComponent onGetAName={handleAName} /><BComponent name={name} /></>);
}function AComponent({ onGetAName }) {const handleClick = () => {onGetAName('A Component Name');};return <button onClick={handleClick}>Send A Name</button>;
}function BComponent({ name }) {return <div>B Component Name: {name}</div>;
}

2.4 跨层组件通信

跨层组件通信可以通过React的Context API实现。

import React, { createContext, useContext, useState } from 'react';const MsgContext = createContext();function DeepChildComponent() {const msg = useContext(MsgContext);return <div>{msg}</div>;
}function IntermediateComponent() {return <DeepChildComponent />;
}function ParentComponent() {const msg = 'Message from Parent';return (<MsgContext.Provider value={msg}><IntermediateComponent /></MsgContext.Provider>);
}

三、React副作用管理:useEffect

useEffect是React Hooks中用于处理副作用的函数,它可以在组件渲染后执行操作。

3.1 基本使用

import React, { useEffect, useState } from 'react';function ComponentWithEffect() {const [count, setCount] = useState(0);useEffect(() => {console.log('Component did mount and update');}, []); // 空依赖数组表示只在挂载时执行return (<div>Count: {count}</div>);
}

3.2 清除副作用

useEffect可以返回一个清除副作用的函数,通常用于定时器或订阅的清理。

function ComponentWithCleanup() {useEffect(() => {const timer = setInterval(() => {console.log('Timer tick');}, 1000);// 清除副作用return () => clearInterval(timer);}, []); // 空依赖数组return <div>Component with cleanup</div>;
}

四、自定义Hook实现

自定义Hooks允许你封装可复用的逻辑。

4.1 创建自定义Hook

import { useState, useCallback } from 'react';function useToggle(defaultValue) {const [value, setValue] = useState(defaultValue);const toggle = useCallback(() => {setValue(prevState => !prevState);}, []);return [value, toggle];
}

4.2 使用自定义Hook

function App() {const [isOn, toggleOn] = useToggle(true);return (<div>{isOn ? 'Toggle is ON' : 'Toggle is OFF'}<button onClick={toggleOn}>Toggle</button></div>);
}

4.3 React Hooks使用规则

  1. 只能在函数组件中使用:Hooks让你在不编写类的情况下使用state和其他React特性。
  2. 只能在顶层使用:不要在循环、条件判断或嵌套函数中调用Hooks。

结语

​ 通过本文的探索,我们了解到React Hooks提供了一种强大且灵活的方式来构建组件。无论是表单控制、组件通信,还是副作用管理,Hooks都提供了简洁的解决方案。自定义Hooks的引入更是让我们能够复用状态逻辑,编写更干净、更可维护的代码。掌握这些概念和技巧,将极大地提升你的React开发能力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【系统架构设计 每日一问】三 Redis支持事务么,Redis的事务如何保证

实际上&#xff0c;关于Redis事务的说法“Redis 的事务只能保证隔离性和一致性&#xff08;I 和 C&#xff09;&#xff0c;无法保证原子性和持久性&#xff08;A 和 D&#xff09;”并不完全准确。下面我将分别解释Redis事务的四个特性&#xff1a;原子性&#xff08;Atomicit…

探索Mojo模型的超参数优化:自定义搜索策略全解析

探索Mojo模型的超参数优化&#xff1a;自定义搜索策略全解析 在机器学习领域&#xff0c;超参数的调整是提高模型性能的关键步骤。Mojo模型&#xff0c;作为一种高效的模型部署方式&#xff0c;其超参数的搜索同样至关重要。本文将深入探讨如何在Mojo模型中实现自定义的超参数…

5.波士顿房价预测(KNN,决策树,线性回归)

波士顿房价预测 1. 机器学习中的任务分类2. 波士顿房价预测2.1 分析数据2.2 比较 MAE 和 MSE2.2 代码 1. 机器学习中的任务分类 有监督学习&#xff08;supervised&#xff09;&#xff1a;有特征也有标签 分类问题 classification预测离散量 回归问题 regression预测连续量 …

DPDK收包流程和Linux内核收包流程对比

DPDK 网卡收包流程-腾讯云开发者社区-腾讯云NIC 在接收到数据包之后&#xff0c;首先需要将数据同步到内核中&#xff0c;这中间的桥梁是 rx ring buffer。它是由 NIC 和驱动程序共享的一片区域&#xff0c;事实上&#xff0c;rx ring buffer 存储的并不是实际的 packet 数据&a…

【Gin】精准应用:Gin框架中工厂模式的现代软件开发策略与实施技巧(上)

【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上) 大家好 我是寸铁&#x1f44a; 【Gin】精准应用&#xff1a;Gin框架中工厂模式的现代软件开发策略与实施技巧(上)✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 本次文章分为上下两部分&…

Golang使用docker sdk管理docker

包括列出容器、创建容器、删除容器、进入容器、构建镜像等操作。 package dockertoolimport ("context""fmt""github.com/docker/docker/api/types""github.com/docker/docker/api/types/container""github.com/docker/docker/ap…

【RaspberryPi】树莓派系统UI优化

接上文&#xff0c;如何去定制一个树莓派的桌面系统&#xff0c;还是以CM4为例。 解除CM4上电USB无法使用问题 将烧录好的tf卡通过读卡器插入到电脑上&#xff0c;进入boot磁盘&#xff0c;里面有一个Config文件&#xff0c;双击用记事本打开&#xff0c;在【pi4】一栏里加入一…

从零开始手写STL库:List

从零开始手写STL库–List部分 Github链接&#xff1a;miniSTL 文章目录 从零开始手写STL库–List部分List是什么&#xff1f;List需要包含什么函数1&#xff09;基础成员函数2&#xff09;核心功能3)其他功能 基础成员函数的编写核心功能的编写其他功能编写总结 List是什么&am…

QT之QWebEngineView详细介绍

QWebEngineView 是 Qt 框架中用于实现 Web 浏览器功能的一个类&#xff0c;它基于 Chromium 引擎&#xff0c;提供了丰富的接口来支持网页的加载、显示、交互等功能。以下是对 QWebEngineView 的详细介绍&#xff1a; 一、基本概述 引入版本&#xff1a;QWebEngineView 是从 …

Android 自定义系统版本号

framework开发&#xff0c;实现自定义系统版本号。  修改位置&#xff1a;  \build\tools  buildinfo.sh #!/bin/bashecho "# begin build properties" echo "# autogenerated by buildinfo.sh"echo "ro.build.id$BUILD_ID" echo "ro.b…

服务器需要扩容,如何停止宝塔的所有服务?

教程开始 1&#xff1a;新建一个shell脚本执行以下代码 或者进面板 把以下代码丢到计划任务里的shell脚本执行 #!/bin/bash PATH/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin export PATH stop_service(){/etc/init.d/bt stopif [ -f "/etc/init…

Git添加和提交文件

常用命令 git status--查看仓库的状态 git add--添加到暂存区 可以使用通配符&#xff0c;例如:git add *.txt 也可以使用目录&#xff0c;例如:git add .git commit--提交 只提交暂存区中的内容&#xff0c;不会提交工作区中的内容git log--查看仓库提交历史记录 可以使用 --o…

uboot 设置bootargs配置内核网络挂载根文件系统

uboot 设置bootargs配置内核网络挂载根文件系统 uboot设置bootargs env set bootargs "mem256M consolettyAMA0,115200 root/dev/nfs init/linuxrc nfsrootnfs主机地址:nfs路径/busybox/rootfs_glibc_arm64,prototcp rw nfsvers3 rootwait ip板子地址:nfs主机地址:网关:2…

一文解释Spring中对象关系映射(ORM)

对象关系映射&#xff08;ORM&#xff09;是一种编程技术&#xff0c;它把面向对象语言中的对象与关系数据库的数据表通过映射创建关联&#xff0c;实现两者之间的自动数据同步。 在Spring框架中&#xff0c;ORM 是通过Spring Data访问层的一部分实现的&#xff0c;它提供了统…

《Windows API每日一练》14.1 位图基础

位图经常被用来表示来自现实世界的复杂的图像&#xff0c;比如数字化的照片或是视频截图。图元文件则更适合人工产生的或计算机产生的图像&#xff0c;比如建筑结构图。本节我们将讲述有关位图的基础知识。 本节必须掌握的知识点&#xff1a; 位图与图元文件 生成位图 第79练&…

C#与C++交互开发系列(六):同一个项目中使用C#和C++进行混合模式开发

欢迎来到C#与C交互开发系列的第六篇。在这篇博客中&#xff0c;我们将探讨混合编程&#xff0c;即在同一个项目中结合使用C#和C。在同一个项目中同时使用C/CLI和P/Invoke来实现C#与C的互操作。C/CLI提供了直接访问托管代码的能力&#xff0c;而P/Invoke则用于调用现有的C库函数…

计算机网络技术分类

计算机网络技术可以根据不同的分类标准进行分类&#xff0c;以下是一些主要的分类方式&#xff1a; 一、按覆盖范围分类 局域网&#xff08;LAN&#xff0c;Local Area Network&#xff09;&#xff1a; 覆盖范围较小&#xff0c;通常在一个建筑物或校园内。使用广播技术&…

网络安全防御--加密技术及身份、数据认证

VPN概述 VPN诞生的原因 1&#xff0c;物理专线成本高&#xff0c;在位置不固定的情况下&#xff0c;难以实现 2&#xff0c;直接将服务器开放到公网&#xff0c;不安全 VPN --- 虚拟专用网 --- 是指依靠ISP或者其他NSP或者企业自身&#xff0c;构建的专用的安全的数据通信网络&…

MySQL的查询优化思路

目录 前言 解决方案 减少查询 SQL优化 索引优化 减少锁 避免大事务 扩容 硬件升级 前言 一般的系统中&#xff0c;数据库往往都是性能瓶颈。在一个系统中&#xff0c;数据库被使用的频率很高&#xff0c;因为几乎所有的应用程序都需要与数据库交互来读取或写入数据。…

华为OD机试 - 文件缓存系统——优先队列解法

华为OD机试 - 文件缓存系统——优先队列解法 题目描述题目分析代码解析复杂度分析 题目描述 题目描述链接&#x1f517; 题目分析 这题需要我们实现一个LFUCache的自定义数据结构&#xff0c;根据题意&#xff0c;需要分别定义一个put和get方法&#xff0c;用于存储缓存和获…