【React】变量 useState

开发需要,随便学学react。上手第一天,感觉这个JS语法很怪,没有什么逻辑性,比较抽象。随便写写笔记。
跟着网上找的项目写写感觉这个项目还不错:
分享给码友
https://zh-hans.react.dev/learn/tutorial-tic-tac-toe

参考资料:
https://blog.csdn.net/weixin_44867717/article/details/117714680
https://blog.csdn.net/weixin_45842655/article/details/129245291

变量声明

主要有三种方式声明变量,最主要区别如下,但是加上这个useState我就不是很懂了。
在这里插入图片描述

变量提升:指的是你在该行声明了变量,但是编译器最后执行的时候,会在声明地方作用域开始的地方进行声明。简单来说就是你在某个大括号中间位置用var,最后执行的时候等价于在大括号跟着的地方声明。

块级作用域应该指的是函数大括号封起来的位置。不包括像if或者for循环这种大括号

const常量,如果作用域单纯的变量就是不可以修改的,但是如果作用于obj,obj里面的字段是可以修改的。

useState

这个是用React框架里面的,我也不是很懂这个是个什么玩意。。。
用的时候主要是拿来存储东西的,我当时不理解这不是开个变量就存起来了吗??
后面查资料的意思估计是,在前端渲染的时候,每一次都会刷新变量,也就是相应变量是存不了的,除非是在react上层的全局变量,如果进行什么操作需要刷新react组件,同时需要用到上一次的变量,需要用这个useState存起来。

但最逆天的是,这个东西还要用const声明。。我真的不理解。

	import { useState } from "react";
	const [varName, setVarName] = useState(initialValue)

然后比较有意思的是,如果useState里面变量发生改变,就会自动嵌套地去更新里面的所有东西。
~~感觉就是把所有相关联的所有函数执行一遍。 但感觉容易写出bug… ~~
应该不是,应该是如果修改了useState里面内容,会将组件重新刷新一下,也就是return标签里面的东西。应该会根据新的值重新回送一下,其他的应该就不动。
但是是set完了之后函数执行顺序、刷新、回调函数调用执行顺序还是不懂。

感悟

前端接触不是特别多

目前写下来感觉react好像好处还挺多
主要针对的是h5

  1. 他可以动态生成自己想要的标签,而且使用程序逻辑生成的,自定义能力非常强
  2. 直接减少h5修改代码的量
  3. 所有字段名字都不用暴露在h5层面了

缺点也是很大,代码逻辑很抽象,完全不严谨。感觉很容易写出BUG还不好调试,压根不知道BUG写在哪里。、、、

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

最新MDYS14源码影视视频网站模板/苹果CMS系统/附搭建教程

最新MDYS14源码影视视频网站模板/苹果CMS系统/附搭建教程 基本介绍: 1、后台增加自定义参数,对应会员升级页面,以及积分充值 2、视频,演员,专题,收藏,会员系统模块齐全,支持子分类…

Taro + vue3 中微信小程序中实现拉起支付

在前端开发中 H5 的拉起支付和微信小程序的拉起支付 是不太一样的 现在分享一下微信小程序中的拉起支付 逻辑都在后端 我是用的Taro 框架 其实就是一个Api Taro 文档

【vue3】【vant】 移动端古诗词句子发布收藏项目

更多项目点击👆👆👆完整项目成品专栏 【vue3】【vant】 移动端古诗词句子发布收藏项目 获取源码方式项目说明:其中功能包括素材包含:项目运行环境运行截图 获取源码方式 加Q群:632562109项目说明&#xf…

2024智能驾驶兴趣人群研究报告

来源:百分点舆情中心 近期历史回顾: 劳动力效能提升指引白皮书》人效研究院.pdf 【标准】企业ESG管理体系(T-CERDS 5—2023).pdf 【实用标准】GB_T 43868-2024 电化学储能电站启动验收规程.pdf 【实用模板】用户侧新型储能项目管理流程图及备案资料清单…

二叉树——另一颗树的子树

目录 1:题目分析及思路 2:代码实现和分析 1:代码 2:分析 1:题目分析及思路 给我们两棵二叉树,分别是 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&…

Planned independent reguirement can only be maintained via the network

背景:用户上线ps系统,物料用策略70跑需求 但是因为通用料被改了策略,改成其他的了,影响到计划独立需求了。 如果用户不需要了哪个料就会把数量改为0,或者直接删掉物料。之前建议是改成0,这样还有个记录在…

Pandas中的数据转换[细节]

今天我们看一下Pandas中的数据转换,话不多说直接开始🎇 目录 一、⭐️apply函数应用 apply是一个自由度很高的函数 对于Series,它可以迭代每一列的值操作: 二、⭐️矢量化字符串 为什么要用str属性 替换和分割 提取子串 …

如何ubuntu安装wine/deep-wine运行exe程序(包括安装QQ/微信/钉钉)

1.失败的方法: ubuntu22.04尝试下面这个链接方法没有成功, ubuntu22.04安装wine9.0_ubuntu 22.04 wine-CSDN博客 上面链接里面也提供了wine官方方法,链接如下:https://wiki.winehq.org/Ubuntu_zhcn 但是运行最后一个命令时候报…

HTTP-02

常用HTTP状态码是怎么分类的 常用的HTTP状态码是按照以下几个分类进行的: 1xx 信息类状态码:表示请求已被接收,需要进一步处理。 2xx 成功类状态码:表示请求已成功被服务器接收、理解和处理。 3xx 重定向类状态码:表…

你的生日是星期几?HTML+JavaScript帮你列出来

0 源起 上周末,大宝发现今年自己的生日不是周末,这样就不好约同学和好友一起开生日Party了,很是郁闷。一直嘀咕自己哪年的生日才是周末。 于是我用JavaScript写了一个小程序来帮她测算了未来100年中每年的生日分别是星期几。 1 设计交互界面…

RabbitMQ的Direct交换机

Direct交换机 BindingKey 在Fanout模式中,一条消息,会被所有订阅的队列都消费。但是,在某些场景下,我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 在Direct模型下: 队列与交换机的绑定&a…

DDoS攻击的最新防御策略:从检测到缓解的全方位方案

在数字化浪潮的推动下,互联网已成为现代社会的血脉。然而,随着网络空间的不断膨胀,分布式拒绝服务(DDoS)攻击如同潜伏在暗处的猛兽,随时准备发动致命一击,威胁着网络的稳定与安全。面对这一严峻…

08 元组和集合

目录 一、元组(tuple) 1. 什么是元组 2. 查操作 3. 函数和方法 二、集合(set) 1. 什么是集合 2. 数学集合运算 一、元组(tuple) 1. 什么是元组 元组是容器型数据类型,将( )作为容器的标…

RabbitMQ入门基础篇

文章目录 安装 / 部署 RabbitMQ快速入门消息发送消息接收 WorkQueues模型消息发送消息接收能者多劳总结 交换机类型Fanout交换机声明队列和交换机绑定队列到交换机消息发送消息接收总结 Direct交换机声明队列和交换机为队列绑定相应的key消息接收消息发送 Topic交换机绑定队列消…

类与对象(1)

1.c升级了类 C 语言结构体中只能定义变量,在 C 中,结构体内不仅可以定义变量,也可以定义函数。 比如: 之前在数据结构初阶中,用 C 语言方式实现的栈,结构体中只能定义变量 ;现在以 C 方式实现&…

什么样的台灯适合学生使用?五款暑假必入护眼大路灯分享

什么样的台灯适合学生使用?现在近视越来越低龄化,戴眼镜的小朋友越来越多,每每看着自己孩子眼睛贴到作业本上写作业,我的心都会提到嗓子眼。去医院一检查,果然,远视储备即将告罄,必须要防护了&a…

1500平方米气膜羽毛球馆的造价分析—轻空间

随着全民健身热潮的兴起,气膜羽毛球馆因其良好的空气质量、恒温恒湿的环境和快捷的建设速度,受到了越来越多人的欢迎。建造一个1500平方米的气膜羽毛球馆涉及多个方面的费用,包括场地准备、设备材料、安装施工、配套设施等。轻空间将详细分析…

企业微信内嵌H5项目接入聊天功能

产品需求是,在列表中把符合条件的列表接入聊天功能,以下是详细步骤: 1.引入企业微信 <script src"https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script> 2.获取wx签名(必须要) /*** 获取wx签名**/ export function getWxJsApi(data) {r…

DC/AC电源模块:效率与可靠性兼备的能源转换解决方案

BOSHIDA DC/AC电源模块&#xff1a;效率与可靠性兼备的能源转换解决方案 随着科技的迅速发展和人工智能技术的逐渐成熟&#xff0c;各种电子设备的需求也日益增加。然而&#xff0c;这些设备往往需要不同的电压和电流来正常工作&#xff0c;而供电方式却可能不尽相同。这时&am…

前端框架中的前端打包(Bundling)和前端构建工具(Build Tools)的作用

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介前端框架中的前端打包&#xff08;Bundling&#xff09;和前端构建工具&#xff08;Build Tools&#xff09;的作用1. 引言2. 前端打包&#xff08;Bundling&#xff09;2.1 概述2.2 常见的打包工具2.2.1 Webpack2.2.2 Parcel 2.3 …