首页 > 其他分享 >2023: day1前端晚上学习笔记

2023: day1前端晚上学习笔记

时间:2023-02-27 23:56:51浏览次数:40  
标签:执行 缓存 函数 笔记 day1 参数 2023 useEffect 构造函数

 

2023.02.27

一.webpack

默认webpack打包的时候只会处理JS之间的依赖关系!!!

css-loader(css-loader会处理 import / require() @import / url 引入的内容。)

style-loader(将模块的导出作为样式添加到 DOM 中)

sass-loader(把sass解析css)

二. useEffect 参数

useEffect意思是用于处理组件中的副作用,用来取代生命周期函数。

useEffect的用法是:useEffect就是指定一个副效应函数,组件每渲染一次,该函数就自动执行一次。组件首次在网页 DOM 加载后,副效应函数也会执行。

1.用处:在react中,可以在生命周期中执行副作用操作,在react hooks中,可以在useEffect中执行副作用操作。

2.执行时机:可以看做 react 中componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合,也就是在这三个时候会执行。

3.参数:useEffect()有两个参数,第一个参数是要执行的函数,第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写),根据数组里的变量是否变化决定是否执行函数

4.无需清除的副作用操作:直接在useEffect( method )中传入操作函数method即可

5.需要清除的副作用操作:比如监听事件,useEffect( method )在method中添加了一个监听事件,取消监听只需要在method里return一个取消监听的函数即可

6.第二个参数的用法:

6.1.若不写第二个参数,函数操作每次都会执行 useEffect(method)

6.2.若有第二个参数且数组里的变量不为空,则变量有变化时执行副作用操作,无变化则不执行. useEffect(()=>{doSomeThing}, [a]), a 变化时执行(任意一个或全部变化)

6.3.有第二个参数但数组为空,则副作用仅在组件挂载和卸载时执行。useEffect( ()=>{doSomeThing}, [])

7.其他有依赖项数组的hook:useLayoutEffect、useCallback、useMemo:


useMemo

Usecallback 解决重复渲染

useMemo和useCallback都是reactHook提供的两个API,用于缓存数据,优化性能;两者接收的参数都是一样的,第一个参数表示一个回调函数,第二个表示依赖的数据。

共同作用
在依赖数据发生变化的时候,才会调用传进去的回调函数去重新计算结果,起到一个缓存的作用

两者的区别
useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态
useCallback 缓存的结果是函数,主要用于缓存函数,应用场景如需要缓存的函数,因为函数式组件每次任何一个state发生变化,会触发整个组件更新,一些函数是没有必要更新的,此时就应该缓存起来,提高性能,减少对资源的浪费;另外还需要注意的是,useCallback应该和React.memo配套使用,缺了一个都可能导致性能不升反而下降。


redux :
umi dva
fork:创建一个新的进程或者线程,并发发送请求。

take:监听对应的 action;

call: 发送api请求

all:和fork差不多,并发发送请求

put:发送对应的dispatch, 触发对应的action

ES6 :
Class :

类的继承可以通过extends实现,让子类继承父类的属性和方法,而在子类内部(构造函数constructor)必须调用super()实现继承(super()代表父类构造函数

ES6 的继承机制,则是先将父类的属性和方法,加到一个空对象上面,然后再将该对象作为子类的实例,即“继承在前,实例在后”
所以 ES6 的继承必须先调用super(),这样会生成一个继承父类的this对象,没有这一步就无法继承父类。这意味着新建子类实例时,父类的构造函数必定会先运行一次


static: 是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的

 

JS 基础:

构造函数 this
【首先要明确this指向】:

普通函数:内部的this指向函数运行时所在的对象,也即指向函数的直接调用者* 如果一个函数在全局环境运行,this就指向顶层对象(浏览器中为window对象)* 如果一个函数作为某个对象的方法运行,this就指向那个对象;* 如果一个函数作为构造函数,this指向它的实例对象
箭头函数:没有自己的this对象,内部的this就是定义时上层作用域中的this

要注意的是,构造函数只能是普通函数,箭头函数不能作为构造函数(没有prototype),不可以对箭头函数使用new命令,否则会抛出一个错误

标签:执行,缓存,函数,笔记,day1,参数,2023,useEffect,构造函数
From: https://www.cnblogs.com/kevoin/p/17162416.html

相关文章

  • 第三周day1
    第三周day1,星期一所花时间(上课时间+练习时间):6h代码量:110博客量:2所学到的知识:学了一些Map的相关知识,还有如何切割字符串,如何将字符串转换成字符数组str.toCharArray()。......
  • 每日总结2023/2/27
    今天星期一,上了建民老师的课·,第一次在课上满足建民老师的标准,很意外,然后回来之后学习了Android开发,学习了Activity的跳转功能,以及service的一些具体功能,但是service出现了......
  • 2023.2.27 日寄
    2023.2.27日寄一言\(~~~~\)旦逢良辰,顺颂时宜。——《诗经》模拟赛多线并行题意\(~~~~\)每个东西占的空间为\(a_i\),总容量为\(m\),第\(i\)件物品需要用\(a......
  • 不坑盒子:word/wps最强辅助工具2023最新版
    不坑盒子简介很多朋友在工作过程中需要对Word文档进行编辑处理,如果想让Word排版更有效率可以试试小编带来的这款不坑盒子软件,这是一个非常好用的插件工具,专门应用在Word文......
  • Go 语言推荐书籍(2023)
    Go是谷歌公司为了解决重大问题而设计的一种小型编程语言。快速、现代的编程语言能让业余爱好者、初学者和专业人员都受益。你需要的正是这样的语言。今天给大家推荐10余本......
  • 代码随想录day13 | 滑动窗口最大值 前 K 个高频元素
    滑动窗口最大值题目:给你一个整数数组nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的k 个数字。滑动窗口每次只向右......
  • 2023.2.27每日总结
    getCount()获得viewpager中有多少个viewinstantiateltem()1.将给定位置的view添加到viewGroup(容器)中,创建并显示出来2.返回一个代表新增页面的Object(key)通常都是直接返......
  • 【4】有道云任务二--增加笔记
             work2_addnote.py##添加笔记的测试###导入appium类库#fromappium.webdriver.webdriverimportWebDriver#importtime#fromseleni......
  • 2023/2/27号周一总结
     今天上午没课,在宿舍呆了一上午,写作业和练习编代码。下午是建民老师的课,老师讲了一些关于软件工程的知识和让我们做了一个将文章里单词首尾字母相连最长的单词链这样一个......
  • JavaWeb 读资源的问题-2023-2-27
    1、db.properties文件中读取username和password2、getResourceAsStream("/web-inf/classes/db.properties")3、properties.getProperty("username")publicclass......