React 笔记 jsx

严格约定:React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。

React

JSX

JSX 是由 React 推广的 JavaScript 语法扩展。
用于表达组件的 特殊语法的 js 函数

  • 要求标签必须闭合;
  • 返回的组件必须包裹在一个父标签内;
    <>...</> 类似 vue 的 <template>

通过 () 包裹 d多行 html 标签;通过 {} 插入 js 表达式值
注意: 属性=xxx 时,要去掉“”,否则无法识别{} 插值

html-to-jsx

className htmlFor 自定义组件特殊属性

html 内置标签通过 is 属性 标记为 自定义组件

style 对象方式 指定

style={{width: user.imageSize,height: user.imageSize
}}

事件监听 on前缀

事件传播

在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。

事件捕获

当子组件阻止事件传播后,可以通过 on事件Capture 来强制捕获事件
捕获会被优先处理

条件循环生成

得益于 jsx 语法,条件和循环都可以用原生js来实现;
被循环的(列表)元素 应该设置 key 属性,用于在其兄弟节点中唯一标识该元素。

响应式

useState

const [状态名, 更新状态方法名] = useState(0)

目前看来响应式只能在组件总使用

useRef
不会触发重新渲染

Hook useXxxx

hook 要求必须在组件中使用
只能在组件或自定义 Hook 的最顶层调用

内置的hook

useState 响应式

const [状态名, 更新状态方法名] = useState(初始值)

useContext

类似 Vue provide/inject

useEffect

将一个组件与外部系统同步 类似vue的watch

useEffect(setup, dependencies?)

useRef

自定义hook

通信

prop

通过定义 组件函数的参数 来设定 props

双向数据流

react 对表单元素做了特殊处理,使得绑定的prop后,需要绑定onChange等会改变prop值的事件
对应vue @update:propName
在这里插入图片描述

组件

应严格按照 纯函数 编写

不要在创建时,修改外部的变量

更新屏幕、启动动画、更改数据等,它们被称为 副作用
它们是 “额外” 发生的事情,与渲染过程无关。副作用无需按照纯函数,如事件处理函数。
useEffect 方法在渲染结束后执行。(nextTick)

ref DOM

inputRef.current.xxx

<StrictMode>

包裹 <APP /> 用来 启用额外的开发行为和警告,使得在开发过程中能够及早发现组件中的常见错误。

createContext

创建一个 context 对象.Provider 传给上下文动态内容

<xxxContext.Provider value={var}>

下层通过 useContext(context对象) 获取上下文
https://react.docschina.org/learn


react-dom

React 只包含了 Web 和 Mobile 通用的核心部分,负责 Dom 操作的分到 ReactDOM 中,负责 Mobile 的包含在 ReactNative 中

小驼峰编写propName

虚拟dom:
render (React18后 将被 createRoot 替代) 会将一段 JSX(“React 节点”)渲染到浏览器 DOM 容器节点中。但会先清空DOM 中的内容。

render(reactNode, domNode, callback?)

createPortal 设定插入位置


Redux

全局状态管理
createStore(function reducer(state, action){})
combineReducers 合并多个 reducer

React Redux

<StrictMode><Provider store={store}><APP /></Provider >
</StrictMode>

<Provider> 组件使得 Redux store 能够在应用的其他地方使用

React Redux 在内部实现了许多性能优化,以便你编写的组件仅在实际需要时重新渲染。

  1. 创建一个 Redux store
  2. 订阅更新
  3. 订阅回调内部:
    i. 获取当前的 store state
    ii. 提取这部分 UI 需要的数据
    iii. 使用数据更新 UI
  4. 如有必要,用初始的 state 去渲染 UI
  5. 通过 dispatching Redux actions 去响应 UI 层的交互

connect方法,用于从 UI 组件生成容器组件。

react-router-dom

官方向导

<StrictMode><BrowserRouter><APP /></BrowserRouter>
</StrictMode>
const routes = [{path: '*',element: <NotFound />,}
]

useRoutes 身材组件注册

一般编写

<Routes><Route path="/" element={<NotFound />} /></Routes>

useLoaderData 加载路由变量

react-scripts

包括创建 React 应用程序使用的脚本和配置。
类似 Vue-Cli

umi-requset 类似 axios


https://react.docschina.org/learn/add-react-to-an-existing-project

https://react.docschina.org/learn/start-a-new-react-project

https://reactnative.dev/


@ahooksjs/use-request

useRequest 是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest 就够了。
https://ahooks.js.org/zh-CN/hooks/use-request/basic

const { data, error, loading } = useRequest(()=>{// 在组件初始化时,会自动执行该异步函数···
}, config)

返回内容:

  • data
  • error
  • loading
  • run, runAsync // 仅在手动时有效
  • refresh, refreshAsync 重复上一次请求(参数一致)
  • mutate(value) 立即更新data
  • cancel 忽略当前 promise 返回的数据和错误
  • params 当前 service 的参数数组

config 配置项

manual 手动执行

const { loading, run, runAsync } = useRequest(service, {manual: true
})

defaultParams 默认参数组

生命周期 钩子:

  • onBefore:请求之前触发
  • onSuccess:请求成功触发
  • onError:请求失败触发
  • onFinally:请求完成触发

refreshDeps: [响应式状态, ···] 当它的值变化后,会重新触发请求

formatResult

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

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

相关文章

鸿蒙4.0开发笔记之ArkTS语法基础之数据传递与共享详细讲解(十八)

文章目录 一、路由数据传递&#xff08;router&#xff09;1、路由数据传递定义2、路由数据传递使用方法3、数据传递两个页面的效果 二、页面间数据共享&#xff08;EntryAbility&#xff09;1、定义2、实现案例3、避坑点 三、数据传递练习 一、路由数据传递&#xff08;router…

PaaS(平台即服务)——云计算服务模型(特点,应用场景,优点和缺点,示例)

PaaS&#xff08;平台即服务&#xff09;是云计算的一种服务模型&#xff0c;它提供了一个平台&#xff0c;允许客户开发、运行和管理应用程序&#xff0c;而无需建立和维护通常与这些过程相关的复杂基础设施。PaaS 是作为服务交付的一种方式&#xff0c;它提供了一套工具和服务…

网卡学习资料整理

GMAC网卡相关介绍与分析 https://www.cnblogs.com/forwards/p/17101438.html https://www.eefocus.com/article/1635234.html Linux Phy 驱动解析_linux phy驱动-CSDN博客 GMAC接口五篇 https://blog.csdn.net/dkmknjk/category_11837422.html 以太网扫盲&#xff08;一&am…

麒麟V10服务器安装Apache+PHP

安装PHP yum install php yum install php-curl php-gd php-json php-mbstring php-exif php-mysqlnd php-pgsql php-pdo php-xml 配置文件 /etc/php.ini 修改参数 date.timezone Asia/Shanghai max_execution_time 60 memory_limit 1280M post_max_size 200M file_upload…

分布式和微服务区别

1.分布式 微服务和分布式的区别 1.将一个大的系统划分为多个业务模块&#xff0c;业务模块分别部署到不同的机器上&#xff0c;各个业务模块之间通过接口进行数据交互。区别分布式的方式是根据不同机器不同业务。 2.分布式是否属于微服务&#xff1f; 答案是肯定的。微服务的意…

动手制作个人电脑对话机器人transformers+DialoGPT

简介&#xff1a;DialoGPT是一个对话模型&#xff0c;由微软基于GPT-2训练。由于DialoGPT在对话数据上进行了预训练&#xff0c;所以它比原始的GPT-2更擅长生成类似对话的文本。DialoGPT的主要目标是生成自然且连贯的对话&#xff0c;而不是在所有情况下都提供事实上的正确答案…

基于Spring、SpringMVC、MyBatis开发的游乐场管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis开发的游…

ca单点登录

最近搞得单点登录碰到了很多问题&#xff0c;具体的问题有如下几个&#xff1a; ①如何获取usbkey的值 ②要实现的单点登录的方案 ③如何获取多个key的值&#xff0c;并进行选择登录 ④ie跳谷歌访问业务界面 注&#xff1a;最后将实现代码附上&#xff0c;希望对大家有所帮助 1…

Numpy数组的运算(第7讲)

Numpy数组的运算(第7讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

进制 + 原码,反码,补码

进制转换 整数部分 小数部分 原码 反码 补码 原码转补码&#xff1a; 左边和右边第一个1不变&#xff0c;中间取反。-0 除外。 计算机系统中数值一律用补码来存储的原因 其他 术语 进制表 进制数的表示 详细教程可转 爱编程的大丙

数学建模-数据新动能驱动中国经济增长的统计研究-基于数字产业化和产业数字化的经济贡献测度

数据新动能驱动中国经济增长的统计研究-基于数字产业化和产业数字化的经济贡献测度 整体求解过程概述(摘要) 伴随着数据要素化进程的不断加深&#xff0c;对于数据如何作用于经济发展&#xff0c;数据与其他要素结合产生的动能应该如何测度的研究愈发重要。本文将数据新动能分…

sql 条件统计,count+if+sum

1&#xff0c;前提 看同事写的sql语句时&#xff0c;觉得他写的这个countsumif的sql还挺新鲜&#xff0c; 学习记录下&#xff0c;感觉这个挺适合用来对历史数据做条件统计 2&#xff0c;count使用结果 select count(0);//1select count(1);//1select count(null);//0select…

机器人刚性碰撞任务的阻抗控制性能

问题描述 对于机器人刚性碰撞任务&#xff0c;阻抗控制可以有效地提高机器人的适应性和稳定性。 在刚性碰撞任务中&#xff0c;机器人在接触外部物体时需要快速适应并调整自身的运动轨迹和速度&#xff0c;以实现精确的操控和稳定的交互。阻抗控制可以通过调整机器人的阻抗参…

【Flink系列五】Checkpoint及Barrier原理

本章内容 一致性检查点从检查点恢复状态检查点实现算法-barrier保存点Savepoint状态后端&#xff08;state backend&#xff09; 本文先设置一个前提&#xff0c;流处理的数据都是可回放的&#xff08;可以理解成消费的kafka的数据&#xff09; 一致性检查点&#xff08;che…

深度学习之注意力机制

注意力机制与外部记忆 注意力机制与记忆增强网络是相辅相成的&#xff0c;神经网络去从内存中或者外部记忆中选出与当前输入相关的内容时需要注意力机制&#xff0c;而在注意力机制的很多应用场景中&#xff0c;我们的外部信息也可以看作是一个外部的记忆 这是一个阅读理解任务…

Nodejs安装使用,nvm对Nodejs和npm版本控制

Nodejs 安装 使用: npm 是Nodejs的内置 包管理工具 下载长期支持版本Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型&#xff0c;使其轻量又高效。Node.js 的包管理器 npm&#xff0c;是全…

Flink之JDBCSink连接MySQL

输出到MySQL 添加依赖 <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-jdbc</artifactId><version>3.1.0-1.17</version> </dependency> <dependency><groupId>com.mysql</gr…

在pytorch中自定义dataset读取数据

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 有关我们数据读取预训练 以及如何将它打包成一个一个batch输入我们的网络的 首先我们来看一下之前我们在讲resnet网络时所使用的源码 我们去使用了官方实现的image folder去读取我们的图像数据 然…

xilinx的XVC协议

文章目录 概述JTAG工作方式XVC协议 其他Debug Bridge IP 概述 JTAG工作方式 XVC协议 其他 Debug Bridge IP

Python正则表达式指南

正则表达式指南 摘要 本文是关于在 Python 中通过 re 模块使用正则表达式的入门教程。它提供了比“标准库参考”的相关章节更平易的介绍。 引言 正则表达式&#xff08;Regular expressions&#xff0c;也叫 REs、 regexs 或 regex patterns&#xff09;&#xff0c;本质上…