1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的高阶组件实际上是装饰器(Decorator)模式的一种实践. 2. 无状态组件(stateless component) 无状态组件又叫纯函数组件,就是没有state的组件,纯展示型组件. React组件有两种类型,无状态组件和类组件,按照写法又有3种写法: 1. 函数式定义的 无状态组件2. ES…

高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的函数. 高阶函数 要了解高阶组件,首先我们要了解下什么是高阶函数! 特征: 1. 函数可以作为参数传递: 2. 函数可以作为返回值被输出: 高阶组件目的与意义:减少重复 重复是优秀系统设计的大敌 --Robert C.Martin 在React中使用高阶组件的方法: 1. HOComponent(W…

构造器 在定义类时可以定义主构造器.主构造器可以同时声明字段. /** * 主构造器 * @author Administrator */ //在scala中,类和方法交织在一起 class TestClass51(val name:String = "" ,val age:Int = 0){ println("name="+ name + " age=" + age) } object TestScala51 { def main(args:…

一.高阶函数 函数实际上也是一个对象,所以也能由变量指向一个函数对象,实际上函数名就是一个变量名.那么函数是传入变量作为参数的,如果传入的变量指向的是函数对象,这种函数就叫高阶函数. 高阶函数就是传入函数作为参数的函数. 下面先介绍两种高阶函数: (1)map() map函数接受两个参数,一个函数,一个iterable.map将传入的函数依此作用到iterable的每个元素,并将结果作为新的iterable返回.所以map传入的函数必须是只能接受一个参数的. 示例: (2)reduce() re…

1.map()传入的有两个参数,函数和可迭代对象(Itreable),map()是把传入的函数依次作用于序列的每个元素,结果返回的是一个新的可迭代对象(Iterable). map()代码如下: # 定义f函数,返回的是x*x def f(x): return x*x # 调用map(),根据传入的函数和list,依次作用于每个元素 s=map(f,[1,2,3,4,5]) # 打印返回的迭代器的值 print(list(s)) # 查看类型 print(type(s)) 结果: [1, 4,…

ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM,只有当它真正的插入文档之后,才变为真正的DOM节点.根据React的设计,所以的DOM变动都发生在虚拟DOM上,然后再将实际的部分反映到真实的DOM上--这就是 DOM DIff,它可以提高页面性能. 如何使用ref呢? ref属性的定义是在使用组件的部分,而组件的方法之类的都是在定义组件的里面就…

1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.false表示可以使用. 由于disabled的值是动态变化的. 此时我们就可以使用计算属性computed 这个方法. 只要值发生变化 他就会重新去计算. 在vue3中,如果需要使用computed需要引入. <template> <div> <div> <div>…

在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactive({ note: [], }); getArticalLatest().then((res) => { data.note = res.data.data; }); return { ...toRefs(data), }; }, 在onMouted里面请求数据 setup(props) { con…

watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newValue, oldValue) => { //直接监听 console.log("count改变了"); }); 监听响应式对象 let book = reactive({ name: "js编程", price: 50, }); const changeBook…

vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法. 组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue".引入之后 computed 可以传入的参数有两种:回调函数和 options .具体看看它是如何使用…