ReactHook之useState
React的Hook之useState我们在写Vue时,组件从挂载到卸载有初始化前后,更新前后,卸载前后这样的三种类型的生命周期,当然,在这里面,还有更细的分类,这里就不再一一例举了。作为目前前端主流框架的React,也有如此类似的生命周期。
试想一下,这么多的状态,如果我要获取一个值,时而把它清空,时而有需要加载,时而更新,想想头都大了,有没有一种方法,能够智能的管理这个值的去留问题呢?
欸!还真有,这个就是今天要介绍的React中好玩的Hook。
什么是Hook呢?我们先来看看官方的定义:
Hook 是一些可以让你在函数组件里“钩入” 生命周期等特性的函数。
Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
不妨我们先从代码入手,来看看什么是hook。在React中有两种组件,一种是函数组件,另一种则是类组件。组件内部当然是需要自身使用的值,那么我们可以把这些值叫做state。我们先来看一下代码:
12345678910111213141516171819//不使用hook的类组件class Example extend ...
js相等和全等你真的了解嘛
你有仔细了解(相等)==和(全等)===的区别么?
开胃菜废话少说,我们直接从题目入手,判断true或者false:
123456//判断下面的对错6==6;6===6;6=="6";6==="6";
那么,答案是多少呢?放入浏览器,我们很容易知道答案:
123456786==6;true6===6;true6=="6";true6==="6";false
我们知道,==会先检查两个操作数的数据类型是否相同,如果相同,则比较两个数是否相等,如果不同,则先将两个数转换为相同数据类型,再进行比较。
那么,6==6和6===6就不用说了,肯定为true,而6=="6",则是会把字符类型的6转换为数字类型的6,再同时比较,所以,为true。由此,因为全等是包含数据类型也要相等的,所以6==="6"为false。
简单嘛?我们现在开始来看一点不一样的** (^_^)1234567true == 1;false == 0; ...
CSS中的BFC问题
一、什么是 BFC?通俗来讲,BFC(Block Formatting Context)直译为”块级格式化上下文”。也就是说,它是一个独立的渲染区域。即是块盒子(Box)的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
不过,在我们 BFC 深入之前,我们先来看看常规流(Normal Flow),当然,我们也可以叫做文档流,因为也可用于文档排列布局。
二、常规流与非常规2.1 常规流
在常规流中,他们都有一下特点:
内联盒子水平排列,直到当行被占满之后换行。只有水平外边距、边框和内边距会被保留。
块级盒子占满一行,下一个自动往下补齐。同级盒子间的垂直距离会由**margin**属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。
各盒子元素按照其在 HTML 中先后位置,至左向右至上而下布局。
2.2 浮动当然,有常规流,就会有不常规流,浮动(Float)就是一个例子。当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。float CSS 属性指定一个元素应沿其容器的左侧或右侧放 ...
将网页封装安卓APP的几种方法
将网站封装成APP安卓应用我接触到的目前有三种方法,构建方法和难度也是逐步提升,不过,世上无难事,只怕有心人,干就完了,奥里给!
法一:利用一个木函封装讲真,这个方法是我目前接触到最快,最省力,而且最高效的做法,速度起飞,快的一批~~
1.1 手机应用商店搜索一个木函应用。
1.2 找到下载并安装。
1.3 打开,依次 全部应用>>网页转应用。1.4 填写好相关信息。
1.5 打包构建安装即可。
1.6 诺,可以正常使用啦!
法二:利用HBuilderX构建相对于法一来说,这个要稍微进阶一点,我们要借用HBuilderX把文件进行打包构建。既然然说到这里了,不得不插一嘴谈谈uni-app,据说这个特别厉害,官方文档是这么解释的:
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝)、快应用等多个平台。
老牛逼了!改天着手研究研究!好了, ...
大文件分片上传以及相关优化
在项目上遇到需要上传大文件到服务器的需求,本着好记性不如烂笔头记录(现学现卖😂)的精神,这里就记录一下哈哈哈。
一、上传文件的前端流程我们在上传大文件中,常用方案是将一个大文件切片成多个小文件,并行请求接口进行上传,上传完成之后,再通知服务器合并。具体来说,操作流程如下图所示。
1.1 从文件分片到md5加密我们可以通过Md5把文件加密,给定一个唯一的标识,那么这样就可以利用这个标识来查询文件的上传状态了。在前端,有一个流传甚广的md5加密插件,spark-md5,它可以根据文件的内容生成md5值,这样有一个好处,可以通过md5值判断文件是否唯一,防止用户重复上传文件,增加服务器空间压力。
不过,在加密之前,我们首先要把文件进行切割,然后再分片读取进行加密。由文档可知,Blob 对象中的 slice 方法可以对文件进行切割。而File 对象是继承 Blob 对象的,因此 File 对象也有 slice 方法,这个我们会在后面用到的。
好了,我们可以写一个加密的方法了,这里的代码格式参考了spark-md5的官方文档,感兴趣的可以去阅读一下。我们在这里使用JavaScript的用 ...
vue中非父子组件传值
项目中,代理商详细查询需要传入一个item.id给兄弟组件作为调用API的参数,这里就涉及到了非父子传值。
目前我接触的一共有以下几种方式。
1.利用vue总线注册公共组件传值
如图所示,我们可以创建一个公共的总线,通过它来传递。具体代码如下:
12345//创立bus.jsimport Vue from 'vue'const Bus = new Vue()export default Bus
在组件A中把调用
1234567891011121314import Bus from './Bus'export default { data() { return { ......... } }, methods: { .... Bus.$emit('log', 120) //把要发送的数据挂载到bus上 }, }
在组件B中调用 ...
Javascript隐式转换
js隐式转换隐式转换定义在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算。这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的"0"转成数字0然后在比较大小。
隐式转换规则
类型
符号使用
转成string类型
+(字符串连接符)
转成number类型
++ --(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
转成boolean类型
!(逻辑非运算符)
隐式转换需要注意的"+"两边只要有一边是字符串,则为字符串连接符,只有两边都是数字时候,才是算数运算符,下同
1234console.log(1+"true");//"1true"console.log(1+true);//2co ...
javascript正则表达式
正则表达式 都别吵!我是帅的代表!欢迎你回来再看一遍~~
作为小白的我在学习前端过程中,难免会碰到正则表达式,那么什么什么正则嘞?通俗解释来讲,它是可以用来从文本中找出满足你想要的格式的句子。
比如,我想在下面一串数字中找出能被二整除的数:
11 2 3 4 5 6 9 7 8 0
那么,我们可以很清楚的知道了0、2、4、6、8就是的。
再比如,我们想设定一个用户命名的规则,让用户名包含字符、数字、下划线和连字符,以及限制字符的个数,好让名字看起来没那么丑。那么在通常的前端input中,会把value值做字符匹配,但是如果我们用javascript来判断,则需要写相对复杂的代码。
因此,正则表达式(Regular Expression ,下文简称”正则“)就出现了。这里就不在去赘述其起源,感兴趣的话大家可以去点我百度。
正则格式 帅的标准由我说的算!我们回到之前那个问题:设定一个用户命名的规则,让用户名包含字符、数字、下划线和连字符限制字符,并且需要限制用户名字符数。利用正则我们可以这样写:
1^[a-z0-9_-]{3,15}$
其中,^为正则开始符号,在中 ...
Javascript回调函数
让我们在现实生活中找找回调函数的身影1234假设在一场聚会上你认识了一位志同道合的朋友,你们俩惺惺相惜,于是互换了联系方式。当某一天,你事情找他的时候,你可以打他的电话。当然,他也有可能有事情找你,会依据你的电话号码回打给你。
我们来分析一下这则故事,该故事有这么些点。
你给了朋友你的联系方式。(当然,你也获得了朋友的联系方式。)
你可以直接打电话给朋友。这个过程就叫call。
你朋友也可以依据你留下的联系方式,回打给你。这个过程就叫callback。
让我们用代码来模拟一下12345678910function callback() { console.log("I am in the callback!");}function work(func) { console.log("I am calling the callback!"); func(); }work(callback);
以上代码的运行结果为:
123I am calling the callback!I am i ...
小爱课程表适配教务网
如果你有小米手机(绝对不是广告)怎么说,MIUI很对我胃口,特别是现在的小爱同学,贼香。
大学里面最烦人的是什么?我想个人来说查课表绝对排进前十。特别是教务网不是好用。因此,前段时间有机会加入到小米的小爱同学课程表开发者群 虽然我经常划水🤣 ,特地来将代码记录一下。
主要方法是正则表达式,利用小米提供的API即可使用。
这里我学校的教务系统是强智的,路径为http://教务网域名/jsxsd/framework/xsMain.jsp
整体界面如下所示:
就可以使用以下代码放入开发者工具,详情可以去看看官方文档
废话少说,上代码ing.123456789function scheduleHtmlProvider(iframeContent = "", frameContent = "", dom = document) { var request = new XMLHttpRequest(); request.open('GET', '/jsxsd/xsk ...