当前位置：首页 > article >正文

React---day6、7

article 2025/9/13 17:36:52

6、组件之间进行数据传递

6.1 父传子：props传递属性

父组件：

 <div><ChildCpn name="蒋乙菥" age="18" height="1,88" />
</div>

子组件：

export class ChildCpn extends React.Component{render(){const {name , age , height} = this.propsreturn (<div><h2>{"姓名" + name + "," + "年龄" + age + "身高" + height}</h2></div>)}}

6.2 子传父：父组件定义函数，子组件调用函数

父组件：

  <BtnCpn addNum={this.addNum.bind(this)}/>addNum() {this.setState({num : this.state.num + 1})}

子组件：

import React from "react";export class BtnCpn extends React.Component{render(){const { addNum } = this.propsreturn (<div onClick={addNum}>+1</div>)}
}

但是我们也出现了this的绑定问题：

        子传父通信.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'setState')at addNum (子传父通信.js:22:1)

nind绑定

     <BtnCpn addNum={this.addNum.bind(this)}/>

箭头函数：

      addNumTwo = () =>  {this.setState({num : this.state.num + 1})//箭头函数}

6.3 阶段案例

由两部分组成：tabBar以及父组件

父组件传递数据给子组件，点击子组件，传递数据给父组件，切换内容

App.js

import React from "react";
import { TabBar } from "./tabBar";
export class App extends React.Component{constructor(){super();this.state =  {tabList : ["流行" , "新款" , "精选"],context : "流行",curIndex: 0}}render(){return (<div className="content"><TabBar clickItem={this.handleTabClick}curIndex={this.state.curIndex}tabList={this.state.tabList} /><h2>{this.state.context}</h2></div>)}handleTabClick = (index) => {this.setState({curIndex: index,context: this.state.tabList[index]});//更改的函数}}

tabBar

import React from "react";
export class TabBar extends React.Component{render(){const {tabList  , curIndex , clickItem } = this.props;return (<ul className="tab">{tabList.map((item, index) => (<likey={index}className={`item${curIndex === index ? ' active' : ''}`}onClick={() => clickItem(index)}>{item}</li>))}</ul>)}
}

6.4 跨组件通信

context相关的api

React.createContext

用于创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 的组件时，它会从组件树中最近的 Provider 中读取当前的 context 值。

Context.Provider

每个 Context 对象都会有一个 Provider React 组件，它允许消费组件订阅 context 的变化。

Class.contextType

用于 class 组件中订阅 Context，只有当组件中使用了 contextType，组件才会订阅 Context 的变化。

Context.Consumer

用于函数式组件中订阅 Context。它允许你订阅 context 的变化，并在 context 发生变化时重新渲染组件。

useContext Hook

用于函数式组件中订阅 Context。它接收一个 context 对象（从 React.createContext 创建）并返回该 context 的当前值。

实例：

import React, { createContext, useContext } from 'react';// 创建一个 Context 对象
const ThemeContext = createContext('light');// 一个函数式组件，使用 useContext 订阅 Context
function ThemedButton() {const theme = useContext(ThemeContext);return <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>I am styled by theme!</button>;
}// 一个中间组件
function Toolbar() {return (<ThemedButton />);
}// 应用程序的顶层组件
function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}export default App;

7、slot插槽

其实也算是传参数叭，只是参数是html表达式

App.js

      <NavBar2 leftSlot={<span>aaa</span>} centerSlot={<span>bbb</span>}rightSlot={<span>ccc</span>}/>

NavBar2:

export class NavBar2 extends React.Component {render() {const {leftSlot , centerSlot , rightSlot } = this.props;return (<div className="main"><div className="bay-left">{leftSlot}</div><div className="bay-mid">{centerSlot}</div><div className="bay-right">{rightSlot}</div></div>)}
}

8、setState

8.1 为什么要使用setState?

开发中我们并不能直接通过修改state的值来让界面发生更新：
因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；
React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
我们必须通过setState来告知React数据已经发生了变化；

8.2 为什么可以直接this.setState

setState方法是从Component中继承过来的。

在这里插入图片描述

8.3 为什么setState是异步的

setState设计为异步，可以显著的提升性能；
- 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
- 最好的办法应该是获取到多个更新，之后进行批量更新；
如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
- state和props不能保持一致性，会在开发中产生很多的问题；

8.4 setState一定是异步的吗

在组件生命周期或React合成事件中，setState是异步；
在setTimeout或者原生dom事件中，setState是同步

8.5 数据的合并

当this.state里面有两个属性：name、title

我们修改只修改name，那么title会不会受到影响呢？答案是不会

源码中其实是有对原对象和新对象进行合并的：

Object.assign

setState可以传入参数或者是函数：

传入参数：数据会进行合并，多个setSEtate合并更新为1个

传入函数：数据不会进行合并

在这里插入图片描述

最后会+3

9、React的更新流程

在这里插入图片描述

更新优化的方法：

9.1 对比不同类型的元素

当节点为不同的元素，React会拆卸原有的树，并且建立起新的树：

当一个元素从变成，从
变成，或从变成
都会触发一个完整的重建流程；

相关文章：

React---day6、7

6、组件之间进行数据传递 **6.1 父传子：**props传递属性父组件： <div><ChildCpn name"蒋乙菥" age"18" height"1,88" /> </div>子组件： export class ChildCpn extends React.Component…...

编程日记 2025/9/11 16:39:45

hook组件-useEffect、useRef

hook组件-useEffect、useRef useEffect 用法及执行机制 WillMount -> render -> DidMount ShouldUpdate -> WillUpdate -> render -> DidUpdate WillUnmount(只有这个安全) WillReceiveProps useEffect(callback) 默认所有依赖都更新useEffect(callback, [])&am…...

编程日记 2025/9/11 17:00:59

功能结构整理

C# Sxer Sxer.Base：基础子功能 Sxer.Base.Debug：打印 Sxer.Utility：工具类 Sxer.CustomFunction：独立功能点开发 Unity...

编程日记 2025/7/7 14:23:25

企业级开发中的 maven-mvnd 应用实践

1. 引言：Maven 在企业级开发中的挑战 1.1 Maven 构建的常见痛点在大型 Java 项目中，Maven 是主流的构建工具，但随着项目的复杂度增加，其性能瓶颈逐渐显现：构建速度慢：每次执行 mvn clean install 都需要重新加载插件和依赖。重复构建浪费资源：即使未修改源码，仍会触…...

编程日记 2025/7/23 14:43:52

yolov12毕设前置知识准备 1

1 什么是目标检测呢？ 目标检测（Object Detection）主要用于识别图像或视频中特定类型物体的位置，并标注其类别。简单来说，就是让计算机像人类一样 “看懂” 图像内容，不仅能识别出物体（如人、…...

编程日记 2025/7/23 12:13:00

随机游动算法解决kSAT问题

input：n个变量的k-CNF公式 ouput：该公式的一组满足赋值或宣布没有满足赋值算法步骤： 随机均匀地初始化赋值 a ∈ { 0 , 1 } n a\in\{0,1\}^n a∈{0,1}n.重复t次（后面会估计这个t）： a. 如果在当前赋值下…...

编程日记 2025/9/11 17:37:18

《Discuz! X3.5开发从入门到生态共建》第1章 Discuz! 的前世今生-优雅草卓伊凡

《Discuz! X3.5开发从入门到生态共建》第1章 Discuz! 的前世今生-优雅草卓伊凡第一节从康盛创想到腾讯收购：PC时代的辉煌 1.1 Discuz! 的诞生：康盛创想的开源梦想 2001年，中国互联网正处于萌芽阶段，个人网站和论坛开始兴起。…...

编程日记 2025/9/11 17:51:05

azure web app创建分步指南系列之一

什么是 Azure Web 应用？ Azure Web 应用是 Azure 应用服务的一部分，是一个完全托管的平台，用于开发、部署和扩展 Web 应用程序。它支持各种编程语言和框架，例如 .NET、Java、Python、PHP 和 Node.js，使开发人员能够构建强大的 Web 应用程序，而无需担心底层基础架构。借助…...

编程日记 2025/8/7 15:28:07

PyTorch实战——基于生成对抗网络生成服饰图像

PyTorch实战——基于生成对抗网络生成服饰图像 0. 前言1. 模型分析与数据准备2. 判别器3. 生成器4. 模型训练5. 模型保存与加载相关链接0. 前言我们已经学习了生成对抗网络 (Generative Adversarial Network, GAN) 的工作原理，接下来，将学习如何将其应用于生成其他形式的内…...

编程日记 2025/7/6 2:39:07

笔试强训：Day6

一、小红的口罩（贪心优先级队列） 登录—专业IT笔试面试备考平台_牛客网 #include<iostream> #include<queue> #include<vector> using namespace std; int n,k; int main(){//用一个小根堆每次使用不舒适度最小的cin>>n>&…...

编程日记 2025/9/11 17:50:54

【Hexo】4.Hexo 博客文章进行加密

安装 npm install --save hexo-blog-encrypt1-快速使用将“ password”添加到您的文章信息头就像这样： password: 123456 ---2-按标签加密 1.修改文章信息头如下： title: Hello World tags: - 加密文章tag date: 2020-03-13 21:12:21 password: muyiio…...

编程日记 2025/7/7 17:37:22

Android --- ObjectAnimator 和 TranslateAnimation有什么区别

文章目录 2. 作用范围和功能2. 动画表现3. 是否修改 View 的属性4. 适用场景5. 性能总结： ObjectAnimator 和 TranslateAnimation 都是 Android 中常用的动画类型，但它们有以下几个关键的区别： 2. 作用范围和功能 ObjectAnimator&#xff1a…...

编程日记 2025/7/7 14:40:56

小白的进阶之路系列之四----人工智能从初步到精通pytorch自定义数据集下

本篇涵盖的内容在之前的文章中，我们已经讨论了如何获取数据，转换数据以及如何准备自定义数据集，本篇文章将涵盖更加深入的问题，希望通过详细的代码示例，帮助大家了解PyTorch自定义数据集是如何应对各种复杂实际情况中，数据处理的。更加详细的，我们将讨论下面一些内容…...

编程日记 2025/9/11 14:23:59

安卓添加设备节点权限和selinux访问权限

# 1 修改设备节点权限及配置属性设置节点值 ## 1.1 修改设备节点权限 ### 1.1.1 不会手动卸载的节点在system/core/rootdir/init.rc中添加节点权限在on boot下面添加 chown system system /sys/kernel/usb/host chmod 0664 /sys/kernel/usb/host ### 1.1.2 支持热插拔的…...

编程日记 2025/7/6 21:09:05

谷歌Stitch：AI赋能UI设计，免费高效新利器

在AI技术日新月异的今天，各大科技巨头都在不断刷新我们对智能工具的认知。最近，谷歌在其年度I/O开发者大会期间，除了那些聚光灯下的重磅发布，还悄然上线了一款令人惊喜的AI工具——Stitch。这是一款全新的、完全免费的AI驱动UI&am…...

编程日记 2025/9/11 16:05:15

运营商地址和ip属地一样吗？怎么样更改ip属地地址

‌在互联网时代，IP属地和运营商地址是两个经常被提及的概念，但它们是否相同？如何更改IP属地地址？这些问题困扰着许多网民。本文将深入探讨这两个概念的区别，并详细介绍更改IP属地地址的方法。一、运营商地址和IP属地一…...

编程日记 2025/9/11 17:40:16

在QT中，利用charts库绘制FFT图形

第1章添加charts库 1.1 .pro工程添加chart库 1.1.1 在.pro工程里面添加charts库 1.1.2 在需要使用的地方添加这两个库函数，顺序一点不要搞错，先添加.pro，否则编译器会找不到这两个.h文件。第2章 Charts关键绘图函数 2.1 QChart 类 QChart 是…...

编程日记 2025/9/11 17:11:28

ChatGPT + 知网 + 知乎，如何高效整合信息写出一篇专业内容？

——写作，不是闭门造车，而是高效聚合 🧠 为什么“信息整合力”才是AI时代的核心写作能力？ 现在的写作，不缺工具，也不缺资料，缺的是： 把 scattered info 变成 structured idea 的能力…...

编程日记 2025/7/20 16:33:54

流媒体协议分析：流媒体传输的基石

在流媒体传输过程中，协议的选择至关重要，它决定了数据如何封装、传输和解析，直接影响着视频的播放质量和用户体验。本文将深入分析几种常见的流媒体传输协议，探讨它们的特点、应用场景及优缺点。协议分类概述流媒体传输协议根据…...

编程日记 2025/9/11 16:12:03

vscode中让文件夹一直保持展开不折叠

vscode中让文件夹一直保持展开不折叠问题很多小伙伴使用vscode发现空文件夹会折叠显示, 让人看起来非常难受, 如下图解决办法首先打开设置->setting, 搜索compact Folders, 去掉勾选即可, 如下图所示效果如下看起来非常爽 ! ! !...

编程日记 2025/9/13 0:05:57

JAVA-springboot整合Mybatis

SpringBoot从入门到精通-第15章 MyBatis框架学习MyBatis心路历程 2022年学习java基础时候，想着怎么使用java代码操作数据库，咨询了项目上开发W同事，没有引用框架，操作数据库很麻烦，就帮我写好多行代码，就…...

编程日记 2025/9/12 22:49:38

深度学习pycharm debug

深度学习中，Debug 是定位并解决代码逻辑错误（如张量维度不匹配）、训练异常（如 Loss 波动）、数据问题（如标签错误）的关键手段，通过打印维度、可视化梯度等方法确保模型正常运行、优化…...

编程日记 2025/9/12 23:00:01

MicroPython+L298N+ESP32控制电机转速

要使用MicroPython控制L298N电机驱动板来控制电机的转速，你可以通过PWM（脉冲宽度调制）信号来调节电机速度。L298N是一个双H桥驱动器，可以同时控制两个电机的正反转和速度。硬件准备： 1. L298N 电机控制板 2. ESP32…...

编程日记 2025/9/12 23:50:51

Hive的存储格式如何优化？

Hive的存储格式对查询性能、存储成本和数据处理效率有显著影响。以下是主流存储格式的特点、选择标准和优化方法： 一、主流存储格式对比特性ORC（Optimized Row Columnar）ParquetTextFile（默认）SequenceFile数据布局…...

编程日记 2025/8/19 19:12:36

在部署了一台mysql5.7的机器上部署mysql8.0.35

在已部署 MySQL 5.7 的机器上部署 MySQL 8.0.35 的完整指南在同一台服务器上部署多个 MySQL 版本需要谨慎规划，避免端口冲突和数据混淆。以下是详细的部署步骤： 一、规划配置端口分配 MySQL 5.7：使用默认端口 3306MySQL 8.0.35&#xff1…...

编程日记 2025/9/12 23:06:07

OpenCV CUDA模块结构分析与形状描述符------在 GPU 上计算图像的原始矩（spatial moments）函数spatialMoments()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述该函数用于在 GPU 上计算图像的原始矩（spatial moments）。这些矩可用于描述图像中物体的形状特征，如面积、质…...

编程日记 2025/7/8 20:32:54

QT入门学习(一)---新建工程与、信号与槽

一: 新建QT项目二:QT文件构成 2.1 first.pro 项目管理文件，下面来看代码解析 QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c11TARGET main# The following define makes your compiler emit warnings if you use # any Qt feature …...

编程日记 2025/9/12 22:10:55

UE5.4.4+Rider2024.3.7开发环境配置

文章目录一、UE5安装安装有两种方式一种的源码编译安装、一种是EPIC安装，推荐后者，只需要注册一个EPIC账号就可以一键安装。二、C环境安装 1.下载VisualStudioSetup 下载链接如下下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 选择社…...

编程日记 2025/9/12 23:13:51

Windows环境下PHP，在PowerShell控制台输出中文乱码

解决方法： 以管理员运行PowerShell , 输入： chcp 65001 重启控制台；然后就正常输出中文；...

编程日记 2025/9/13 0:17:08

第2篇：数据库连接池原理与自定义连接池开发实践

2.1 什么是数据库连接池？ 数据库连接池（Connection Pool）是一种用于管理数据库连接对象的复用机制。它的主要目标是： 减少频繁创建/销毁连接的开销提高系统对数据库资源的使用效率支持连接复用、并发控制和连接健康检查连接…...

编程日记 2025/7/10 23:42:30

6、组件之间进行数据传递

**6.1 父传子：**props传递属性

**6.2 子传父：**父组件定义函数，子组件调用函数

6.3 阶段案例

6.4 跨组件通信

7、slot插槽

8、setState

8.1 为什么要使用setState?

8.2 为什么可以直接this.setState

8.3 为什么setState是异步的

8.4 setState一定是异步的吗

8.5 数据的合并

9、React的更新流程

9.1 对比不同类型的元素

相关文章：

6.1 父传子：props传递属性

6.2 子传父：父组件定义函数，子组件调用函数