2023： day1前端晚上学习笔记

 

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命令，否则会抛出一个错误