首页 > 其他分享 >ts跟react的学习点记录

ts跟react的学习点记录

时间:2024-03-12 11:22:23浏览次数:20  
标签:函数 自定义 记录 ts js react Hook 组件

TS:
1.ts与js的区别
ts:js的超集用于解决大型项目的代码复杂性,可以在编辑期间发现并纠正错误,强类型,支持静态和动态类型,最终编译成js,使浏览器可以理解,支持模块、泛型和接口
js:一种脚本语言,用于创建动态网页,作为一种解释型语言,只能在运行的时发现错误,不支持模块、泛型和接口

react学习点:
1.React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母
2.以 use 开头的函数被称为 Hook,Hook 比普通函数更为严格。你只能在你的组件(或其他 Hook)的 顶层调用 Hook
3.使用JSX书写标签语言--由于历史原因,aria-* 和 data-* 属性是以带 - 符号的 HTML 格式书写的
4.如果你的组件里有很多的嵌套式条件表达式,则需要考虑通过提取为子组件来简化这些嵌套表达式。在 React 里,标签也是你代码中的一部分,所以你可以使用变量和函数来整理一些复杂的表达式
5.更新函数必须是纯函数并且只返回结果,setNumber(n => n + 1);
6.如果你想要写出更简洁的更新处理函数,Immer 会是一个不错的选择,尤其是当你的 state 中有嵌套,并且复制对象会带来重复的代码时
7.ref 是一个普通的 JavaScript 对象,具有一个名为 current 的属性,你可以对其进行读取或设置。你可以通过调用 useRef Hook 来让 React 给你一个 ref
8.useRef无法直接跨组件去获取别的组件的ref引用,需要使用forwardRef
9.Effect不能在服务端执行,组件显示时就需要执行的代码应该放在 Effect 中,否则应该放在事件处理函数中。如果你需要更新多个组件的 state,最好在单个事件处理函数中处理
10.自定义hook里面最好有使用 react Hook
11.自定义 Hook 命名必须以后跟一个大写字母的 use 开头,你可以将响应值从一个 Hook 传到另一个,并且他们会保持最新
12.每次组件重新渲染时,所有的 Hook 会重新运行,自定义 Hook 的代码应该和组件代码一样保持纯粹
13.把自定义 Hook 收到的事件处理函数包裹到 Effect Event
14.不要创建像 useMount 这样的自定义 Hook。保持目标具体化

备注:

文章仅做学习记录,有问题随时交流

标签:函数,自定义,记录,ts,js,react,Hook,组件
From: https://www.cnblogs.com/shenwh/p/18067900

相关文章

  • python 使用PaddleOCR读取图片文字,并用pyttsx3转为音频
    python小白,纯纯小白,很久之前看了一遍菜鸟官网,但实在没有应用场景,所以过目即忘。最近工作不是很忙,给我出了个题目,觉得挺有意思,就玩一玩。  所以关键点就是,图片提取出文字,然后文字转音频。1.图片提取文字,PaddleOCR出题人士,给出了git上一个ocr的工具库,支持图文信息的抽取。用......
  • EOL 总结:CMakeLists 与 shell
    一、CMakeLists1、AUX_SOURCE_DIRECTORY定义:aux_source_directory查找在某个路径下的所有源文件###Demo1#查找当前目录下的所有源文件#并将名称保存到SRC_LIST变量aux_source_directory(.SRC_LIST)add_executable(main${SRC_LIST})###Demo2AUX_SOURCE_DIRECT......
  • c++从零实现reactor高并发服务器!!!
    环境准备linux虚拟机安装升级c/c++编译器gcc/g++选项源代码文件1源代码文件2...源代码文件n-o指定输出的文件名(不能和源文件同名默认是a.out)-g调试-On链接时优化减小体积(n=1-3)-c只编译用于生成库-std=c++11支持c++11标准安装man功能man级别接口......
  • Ubuntu.software.rabbitsvc 电脑死活没有右键rabbitsvc菜单+密码没有记住没法保存
    本来这个想发到每日运维的,但是觉得这个比较典型,适合拿来单独说。 现象:其他人电脑装rabbitsvc一次就成功,有的不成功重启一下就好了,或是使用nautilus-a重启一下文件管理器就好了,但是这一台就是不行,版本同样是20.04,太奇怪了小知识:ubuntu20.04有两种文件管理器,一个是nautil......
  • tsv文件在大数据技术栈里的应用场景
    是的,\t是指制表符(tab),它通常用作字段分隔符在TSV(Tab-SeparatedValues)格式的文件中。TSV是一种简单的文本格式,它使用制表符来分隔每一列中的值,而每一行则代表一个数据记录。TSV文件例:ID\tName\tAge\tCity1\tJohnDoe\t28\tNewYork2\tJaneSmith\t32\tLosAngeles上面的例......
  • C# WebApi定时任务FluentScheduler的使用
    第一步:通过NuGget包下载安装FluentScheduler包;第二步:在全局配置文件Global.asax中注册定时任务,方法如下:usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Http;usingSystem.Web.Routing;usingFluentScheduler;......
  • 【论文阅读】N-BEATS Neural basis expansion analysis for interpretable time serie
    原始题目:N-BEATS:Neuralbasisexpansionanalysisforinterpretabletimeseriesforecasting中文翻译:N-BEATS:可解释时间序列预测的神经基展开分析发表时间:2020-02-20平台:arXiv文章链接:http://arxiv.org/abs/1905.10437开源代码:https://github.com/servicenow/n-beats......
  • mysql查询几天之前,或某个时间段之间的每天记录数量,不存在补全0
    直接看SQL(非常简单,通俗易懂)biz_requirement_order:业务表名create_time:业务表时间字段,依据这个字段统计数量num:数量返回值别名,可以随意改t表:查询所有符合条件的日期a表:业务表中根据日期分组,查询每天的记录数量最后使用左连接查询,将两个集合合并返回最终结果查询几天之前......
  • isaac sim 常用记录
    目录常用函数常用demotask类controller类结合写好的task和cotroller常用函数添加usd资产prim_path='/World/warehouse'usd_path='/home/linhai/app/isaac/Collected_warehouse_with_forklifts/warehouse_with_forklifts.usd'stage_utils.add_ref......
  • ReactRouter 基础
    ReactRouter(路由)目录ReactRouter(路由)1、前端路由2、创建路由开发环境3、快速开始抽象路由模块路由导航1、路由导航2、声明式导航3、编程式导航路由导航传参searchParams传参params传参嵌套路由配置1、嵌套路由2、嵌套路由配置3、默认二级路由4、404路由配置5、2种路由模式1......