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

react_12

在异步操作里为状态属性赋值,需要放在 runInAction 里,否则会有警告错误

使用 store,所有使用 store 的组件,为了感知状态数据的变化,需要用 observer 包装,对应着图中 reactions

import { Input } from "antd";
import StudentStore from "../store/StudentStore";
import { observer } from "mobx-react-lite";
import {runInAction} from 'mobx'
import A71 from "./A71";
import A72 from "./A72";
import Search from "antd/es/input/Search";
/* export default */ function A7() {//   function onChange(e: React.ChangeEvent<HTMLInputElement>) {}//如果觉得上面的写法复杂,可以写成下面的形式 <Input onChange={(e)=>{}}></Input>,e就代表事件对象return (<>{/* e.target.value就代表文本框里面输入的值,当在文本框里面输入内容之后,数据已经存入到了StudentStore里面了,页面的数据并没有同步变化,这是因为A7组件并没有感知到StudentStore里面数据的变化,函数组件并没有重新被调用,要想A7感知到store里面数据的变化,需要借助observer方法,使用observer方法之后,就不默认导出A7而是使用export default observer(A7),这样observer函数就能观察到A7内store里面数据的变化,数据变化之后,它就会重新调用A7,observer就对应着Reactions(状态数据发生改变后要执行的操作,这里执行的操作是P7被重新渲染)*/}<InputonChange={(e) => {StudentStore.setName(e.target.value);}}></Input><Searchstyle={{ width: 150 }}placeholder="请输入编号"onSearch={(v) => {StudentStore.fetch(Number(v));}}></Search><h1>组件0:{StudentStore.student.name} {StudentStore.displayName}</h1><h1>组件0: {StudentStore.displayName}</h1><h1>组件0: {StudentStore.displayName}</h1><A71></A71><A72></A72></>);
}
export default observer(A7);

相关文章:

react_12

在异步操作里为状态属性赋值&#xff0c;需要放在 runInAction 里&#xff0c;否则会有警告错误 使用 store&#xff0c;所有使用 store 的组件&#xff0c;为了感知状态数据的变化&#xff0c;需要用 observer 包装&#xff0c;对应着图中 reactions import { Input } from …...

Android Mvp案例解析

目录 后端数据接口数据格式 App客户端布局逻辑主界面布局 M&#xff08;Model&#xff09;V&#xff08;View&#xff09;P&#xff08;Presenter&#xff09;OkhttpRetrofitRxJava网络http请求 Mvp架构-初学者MVP架构的契约者 后端数据接口 接口地址&#xff1a;https://apis.…...

vue的双向绑定的原理,和angular的对比

目录 前言 Vue的双向绑定用法 代码 Vue的双向绑定原理 Angular的双向绑定用法 代码 Angular的双向绑定原理 理解 效率: 虽然Vue和Angular的双向绑定原理不同&#xff0c;但它们都致力于提供高效的数据更新机制。但是&#xff0c;由于Vue使用的是数据劫持&#xff0c;其…...

平衡树相关笔记

引入 二叉查找树 二叉查找树&#xff08;Binary Search Tree&#xff09;&#xff0c;又名二叉搜索树。满足以下性质&#xff1a; 对于非空的左子树&#xff0c;左子树点权值小于根节点。对于非空的右子树&#xff0c;左子树点权值大于根节点。二叉查找树的左右子树均是二叉…...

ASP.net C# 用Aspose.pdf实现pdf合并

直接上代码&#xff0c;供参考&#xff0c;备忘&#xff01; using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; using System.Xml; using System…...

C语言实现原码一位除

具体代码如下&#xff0c;直接运行即可。 #include <stdio.h> int main() {int i, a 0, b 0, c 0, flag 3; // flag相当于指针来指明Q的位置char x[6], y[6];int R[6], Q[6], yb[6], y1[6]; // yb是-y的补码,y1为绝对值yprintf("请输入X(带一位符号位四位数值位…...

three.js点滴yan(整理后)

场景、相机和渲染器 Three.js整个系统主要包含场景Scene、相机Camera和WebGL渲染器WebGLRenderer三大块&#xff0c;其中场景又包含模型和光源。WebGL渲染器的主要作用就是把相机对应场景渲染出来&#xff0c;显示在网页Cnavas画布上。 Three.js源码 Three.js各个构造函数对应…...

VMware安装CentOS最小化开发环境导引

目录 一、概要 二、介绍 三、下载 四、安装 4.1 创建虚拟机 4.2 安装CentOS 五、配置网卡 六、配置本地安装源 七、安装软件 7.1 gcc/g 7.2 C的atomic库 7.3 java 7.4 Cmake 7.5 MariaDB客户端&#xff08;兼容mysql&#xff09; 八、用户配置文件.bash_profile…...

服务器端编程/数据库驱动程序/RESTful API:介绍

目录 服务器端编程数据库驱动程序RESTful API &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01; 服务器端编程 服务器端编程是一种计…...

Qwt QwtThermo绘制温度计

1.简介 QwtThermo 是一个基于 Qt 框架的类库&#xff0c;用于创建温度计控件。它提供了一些方便的功能来展示和处理温度计相关的数据。 QwtThermo 添加了特定于温度计的功能。 使用 QwtThermo&#xff0c;可以实现以下功能&#xff1a; 设置温度范围&#xff1a;可以通过设置…...

U_boot介绍

系统移植之前的了解的&#xff1a; 首先需要移植一个 bootloader 代码&#xff0c;这个 bootloader 代码用于启动 Linux 内核&#xff0c;bootloader 有很多&#xff0c;常用的就是 U-Boot;移植好 U-Boot 以后再移植 Linux 内核&#xff0c;移植完 Linux 内核以后 Linux 还不能…...

Flink -- window(窗口)

1、窗口主要分成三大种&#xff1a; 1、Time Window &#xff08;时间窗口&#xff09;&#xff1a;固定时间触发一次窗口 a、SlidingEventTimeWindows: 滑动的事件时间窗口 public class Demo1TImeWindow {public static void main(String[] args) throws Exception {/*** 时…...

原语:串并转换器

串并转换器OSERDESE2 可被Select IO IP核调用。 OSERDESE2允许DDR功能 参考&#xff1a; FPGA原语学习与整理第二弹&#xff0c;OSERDESE2串并转换器 - 知乎 (zhihu.com) 正点原子。 ISERDESE2原语和OSERDESE2原语是串并转换器&#xff0c;他的的功能都是实现串行数据和并行…...

没网络也能安装.Net 3.5!如何脱机安装.NET Framework 3.5

.NET框架是由微软制定的一个软件框架。它有助于在Windows上运行控制台、Web或移动应用程序。此有用的工具适用于Windows设备。 如何脱机安装.NET Framework 3.5 如果你拥有Windows 10、8、8.1或7,有时第三方软件可能会导致问题。你可能会在图片中看到这样的问题。 看这张照片…...

JVM运行时数据区-虚拟机栈

目录 一、内存中的栈 二、基本内容 三、优点 四、栈的存储单位 五、栈运行原理 六、栈的内部结构 &#xff08;一&#xff09;局部变量表 &#xff08;二&#xff09;操作数栈 &#xff08;三&#xff09;动态链接 &#xff08;四&#xff09;方法返回地址 &#xf…...

Java中介者模式

目录 定义 结构 案例 优点 缺点 使用场景 定义 又叫调停模式&#xff0c;定义一个中介角色来封装一系列对象之间的交互&#xff0c;使原有对象之间的耦合松散&#xff0c;且可以独立地改变它们之间的交互。 结构 中介者模式包含以下主要角色&#xff1a; 抽象中介者角…...

前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录 Vue-cliVue项目-创建Vue项目-目录结构Vue项目-启动Vue项目-配置端口Vue项目开发流程 Vue-cli 介绍&#xff1a;Vue-cli 是 Vue 官方提供的一个脚手架&#xff0c;用于快速生成一个 Vue 的项目模版 安装 NodeJS安装 Vue-cli npm install -g vue/cliVue项目-创建 图…...

App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法

根据近日工业和信息化部发布的《工业和信息化部关于开展移动互联网应用程序备案工作的通知》&#xff0c;相信不少要进行IOS平台App备案的朋友遇到了一个问题&#xff0c;就是apple不提供云管理式证书的下载&#xff0c;也就无法获取公钥及证书SHA-1指纹。 已经上架的应用不想重…...

Spring -Spring之依赖注入源码解析

依赖注入底层原理流程图&#xff1a;Spring中Bean的依赖注入原理| ProcessOn免费在线作图,在线流程图,在线思维导图 Spring中到底有几种依赖注入的方式&#xff1f; 首先分两种&#xff1a; 手动注入自动注入 手动注入 在XML中定义Bean时&#xff0c;就是手动注入&#xf…...

Spire.Office for .NET 8.10.2 同步更新-Crk

Spire.Office for .NET是 E-iceblue 提供的企业级 Office .NET API 的组合。它包括Spire.Doc、Spire.XLS、Spire.Spreadsheet、Spire.Presentation、Spire.PDF、Spire.DataExport、Spire.OfficeViewer、Spire.PDFViewer、Spire.DocViewer、Spire.Barcode和Spire.Email。Spire.O…...

4.2 学习笔记

Mysql 数据库专题1.本专题的学习重点1、熟悉Mysql数据库的连接工具2、掌握查询的SQL语句的编写2.什么是数据库数据库就是存储数据的仓库3.为什么要学数据库Mysql在测试过程中&#xff0c;有时候需要通过访问数据库验证数据的正确性比如&#xff1a;验证统计报表....4.企业主流的…...

Linux网络诊断工具ping、traceroute等命令实战指南

在Linux系统的网络世界里&#xff0c;网络诊断工具就像是我们手中的“听诊器”&#xff0c;能够帮助我们精准地找出网络中存在的问题。今天&#xff0c;我们就来深入了解ping、traceroute等网络诊断命令的使用&#xff0c;通过实际操作和示例&#xff0c;让你轻松掌握使用这些工…...

保姆级教程:用微信小程序NFC读写M1门禁卡(附完整代码与认证避坑指南)

微信小程序NFC开发实战&#xff1a;M1门禁卡读写全流程解析 周末在改造小区老旧门禁系统时&#xff0c;我发现传统IC卡存在易丢失、难管理的痛点。借助微信小程序的NFC能力&#xff0c;我们完全可以用手机替代实体门禁卡。本文将手把手带你实现M1卡的读写操作&#xff0c;重点…...

开发提效新思路:用快马平台打造你的个性化qoderwork代码片段工厂

今天想和大家分享一个提升前端开发效率的实用思路 - 用InsCode(快马)平台打造自己的代码片段工厂。作为一个经常需要重复编写UI组件的前端开发者&#xff0c;我发现这个方案能显著减少重复劳动。 痛点分析 每次新项目都要从零开始写导航栏、页脚这些基础组件特别浪费时间。虽然…...

LAV Filters完整教程:如何让Windows播放器支持所有视频格式

LAV Filters完整教程&#xff1a;如何让Windows播放器支持所有视频格式 【免费下载链接】LAVFilters LAV Filters - Open-Source DirectShow Media Splitter and Decoders 项目地址: https://gitcode.com/gh_mirrors/la/LAVFilters LAV Filters是一套基于ffmpeg的开源Di…...

3步攻克Dlib安装难题:Windows Python环境零编译实战指南

3步攻克Dlib安装难题&#xff1a;Windows Python环境零编译实战指南 【免费下载链接】Dlib_Windows_Python3.x Dlib compiled binaries (.whl) for Python 3.7-3.14 and Windows x64 项目地址: https://gitcode.com/gh_mirrors/dl/Dlib_Windows_Python3.x 你是否曾在Win…...

AI 编程盛行的时代,为什么 “『DC- WFW』” 仍然具有必要性?

AI训练存储选型的演进路线 第一阶段&#xff1a;单机直连时代 早期的深度学习数据集较小&#xff0c;模型训练通常在单台服务器或单张GPU卡上完成。此时直接将数据存储在训练机器的本地NVMe SSD/HDD上。 其优势在于IO延迟最低&#xff0c;吞吐量极高&#xff0c;也就是“数据离…...

大麦网抢票自动化工具:5分钟快速上手完整指南

大麦网抢票自动化工具&#xff1a;5分钟快速上手完整指南 【免费下载链接】damaihelper 支持大麦网&#xff0c;淘票票、缤玩岛等多个平台&#xff0c;演唱会演出抢票脚本 项目地址: https://gitcode.com/gh_mirrors/dam/damaihelper 你是否曾经因为抢不到心仪的演唱会门…...

罗技鼠标宏终极指南:绝地求生压枪脚本完整配置教程

罗技鼠标宏终极指南&#xff1a;绝地求生压枪脚本完整配置教程 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 你是否在《绝地求生》中被武器后坐…...

Spring Boot 远程调试终于来了!IntelliJ IDEA 新版支持「无 Agent」远程调试

推荐阅读 IDEA 官宣全新AI CLI:Gemini大模型免费用! IDEA 2026.1 EAP 4 发布:新特性太丝滑了! IDEA 官宣:终于可以爽用Cursor了! IDEA 这个骚操作,连 VS Code 都跟不上! IDEA 这个测试接口的好工具,效率 提升 10x 这些 IDEA 技巧没用上,你可能少了一大半摸…...