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