前端
文章平均质量分 54
元气满满鸭
一枚小学酥
展开
-
React Hooks学习--useRequest网络请求Hooks
当前用于网络请求的Hooks是很多的,但是为什么选择使用useRequest呢?目前的许多Hooks都需要根据不同的场景来选择,比如分页usePagination,加载更多useLoadMoreuseAsync能力不足,不能支持并行请求useRequest不仅包含来Umi Hooks所有和网络请求相关的Hooks,还借鉴了swr的特性swr的主要能力在于:我们在发送网络请求时,会优先返回缓存内的数据,然后在背后发起网络请求,最终用新的请求结果来触发组件渲染。一.useRequest的基本使用原创 2021-05-20 20:35:49 · 7917 阅读 · 1 评论 -
React学习--render props
render props相当于vue中的插槽技术,在某一位置预留一行代码this.props.render(),之后只需要在特定位置传入组件,即可展示注意:此render为属性名当不需要传值时class Parent extends Component{ render(){ <div> <A render={() => <B/>} //A,B为父子组件 </div> }}class A extends Component{原创 2021-05-20 01:48:09 · 254 阅读 · 0 评论 -
React学习--组件通信方式总结
一.组件间的关系父子组件兄弟组件祖孙组件二.几种通信方式props(1) children props(2)render props消息订阅-发布:pubs-sub集中式管理:reduxcontext三.比较好的搭配父子组件:props父给子传用props,子给父传时,需要父组件最初给子组件传的是一个函数,子组件调用函数时,便将值传给了父组件兄弟组件:集中式管理,消息订阅-发布祖孙组件:集中式管理,消息订阅-发布,context...原创 2021-05-20 00:10:59 · 102 阅读 · 0 评论 -
Redux学习--异步action和react-redux汇总
一.异步action明确:延迟的动作不想交给组件自身,想交给action何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回具体编码:(1)下载yarn add redux-thunk,并配置在store,因为store只能识别对象类型的action,对于返回的函数action,则需要中间商来帮助store执行一下(2)在redux中引入applyMiddleware中间商,中间商应用刚才下载的thunk(3)创建的异步action,返回一个函数,在该函数中写原创 2021-05-19 21:47:01 · 447 阅读 · 4 评论 -
Redux学习--Redux工作流程与三个核心属性
一.Redux的三个核心属性1.action表示动作对象包含两个属性(1)type: 标识属性,值为字符串,唯一,必要属性(2)data: 数值属性,值类型任意,可选属性例子:{type:'ADD',data:{name:'tom',age:18}}2.store将state,action,reducer联系在一起的对象3.reducer用于初始化状态和加工状态加工时,根据旧的state和action,产生新的state的纯函数二.redux的基本使用例子:要使原创 2021-05-18 19:48:08 · 846 阅读 · 0 评论 -
React Hooks学习--useReducer,useMemo和useRef
一.useReducerfunction ReducerDemo(){ const [count,dispatch] = useReducer((state,action) => { switch(action){ case 'add': return state + 1 case 'sub' return state - 1 default: return state } },0) return ( <> <h2>原创 2021-05-17 21:40:33 · 443 阅读 · 0 评论 -
React Hooks学习--hook入门:useState,useEffect,useContext和useSelector
Hooks主打使用function component组件,替代class组件一.useStateuseState主要用做变量和方法的声明,useState(参数)中的参数表示变量的初始值在import导入时,使用useState替代之前由react导入的Component,如下import React ,{useState} from 'react' function Demo(){ const [count , setCount] = useState(0); return( <原创 2021-05-17 16:16:20 · 1496 阅读 · 1 评论 -
Typescript学习--类中属性的封装和泛型
一.属性的封装TS可以在属性前添加属性的修饰符public修饰的属性可以在任意位置访问,为默认值private私有属性,私有属性只能在类的内部进行访问(修改),通过在类中添加get和set方法,使得私有属性可以在外部访问protected受保护的类,只能在当前类及其子类中访问get和set方法class Person{ private _name: string; private _age: number; get name(){ // get方法 return this._na原创 2021-05-12 13:32:02 · 343 阅读 · 0 评论 -
Typescript学习--类和接口
一.类先举一个简单的例子class Person{ name: string = '小四' age: number = 18 static gender: string = 'male'}const per = new Person()直接定义的属性是类的实例属性,需要通过类的实例对象访问const per = new Person(); per.name使用static开头的属性是静态属性(类属性),可以直接通过类去访问Person.genderreadonly开头的属性表示一个只原创 2021-05-11 21:50:38 · 110 阅读 · 0 评论 -
Typescript--Typescript中的新增类型
一.anyany表示的是任意类型,一个变量设置类型为any后,相当于该变量管理了TS的类型检测,尽量不要用anylet d: any声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any(隐式的any)let d;d = 10;d = 'hello'd = true二.unknownunknown表示未知的类型let e: unknown;e = 10;e = 'hello'两者的区别在于:d的类型为any,它可以赋值为任意变量。而e的类型为unknown,但是原创 2021-05-11 20:41:40 · 633 阅读 · 0 评论 -
redux学习
一.redux的理解redux是什么?redux是一个专门用于做状态管理的JS库(不是react插件库)可以用在react、angular、vue等项目中,但基本与react配合使用作用:集中式管理react应用中多个组件共享的状态什么情况下需要使用redux?某个组件的状态,需要让其他组件可以随时拿到(共享)...原创 2021-05-10 20:10:22 · 68 阅读 · 0 评论 -
React学习--BrowserRouter与HashRouter的区别,withRouter用法
一.编程式路由导航借助this.props.history对象上的API操作路由跳转、前进、后退this.props.history.push()this.props.history.replace()this.props.history.goBack()this.props.history.goForward()this.props.history.go()二.withRouter的使用import {withRouter} from 'react-router-dom'class原创 2021-05-09 20:19:22 · 360 阅读 · 0 评论 -
React学习--嵌套路由与组件的3种传参方式
一.嵌套路由的使用注册子路由时要写上父路由的path值路由的匹配是按照注册路由的顺序进行的,从App.jsx开始二.向路由组件传递参数数据params参数路由链接(携带参数)注册路由(声明接收)接收参数:从this.props.match.params中获取search参数路由链接(携带参数)注册路由(无需声明,正常注册即可)接收参数注意:获取到的search是urlencode编码字符串(?id=01&title='消息1'),需要借助querys原创 2021-05-09 19:25:49 · 236 阅读 · 3 评论 -
React学习--模糊/严格匹配及重定向
一.多级路径刷新页面样式丢失的问题多级路径下刷新页面样式丢失的主要原因在于:index.html文件中使用的样式文件链接为相对路径,而非绝对路径解决方法:public/index.html中,引入样式时不写./写/(常用)public/index.html中,引入样式时不写./写%PUBLIC_URL%(常用),但只限在react中使用使用HashRouter,因为url中#号后面的hash值是不发送给服务器的(不推荐)二.路由的模糊匹配和严格匹配默认使用的是模糊匹配,简单记:给的比要原创 2021-05-09 13:35:57 · 489 阅读 · 0 评论 -
React学习--NavLink和Switch
一.路由组件与一般组件的区别写法不同:一般组件:<Demo/>路由组件:<Route path="/xxx" component={Demo} />存放位置不同:一般组件:component文件夹路由组件:pages文件夹接收到到props不同:一般组件:写组件标签时传递了什么,就能收到什么路由组件:接收到三个固定的属性 history、location、match二.NavLink的使用NavLink可以实现路由链接的高亮,可以使用NavLink替代Lin原创 2021-05-08 19:39:25 · 267 阅读 · 3 评论 -
React学习--react路由基础及使用
一.React路由的理解什么是路由?a. 一个路由就是一个映射关系(key : value)b. key为路径,value可能是function或component当点击路由元素时,不是页面发生了变化,而是路径path变化,例如:不是127.1.1.550/home.html而是127.1.1.550/home路由会监听path的变化,找到对应的路由组件,呈现到页面上路由分类a. 后端路由:1)理解:value是function,用来处理客户端提交的请求2)工作过程:当node原创 2021-05-08 14:24:45 · 142 阅读 · 0 评论 -
Macos安装react脚手架流程及遇到的问题
在安装react脚手架时发现问题百出,用正常的方法总会出现下图所示的错误,总结一下自己最终下载成功的流程供参考使用。一.首先检查一下是否安装了cnpm,通过cnpm -v查看,若没有安装则推荐安装一下,这里使用了淘宝镜像网站,下载更快sudo npm install cnpm -g --registry=https://registry.npm.taobao.org下载结束后,查看是否安装成功cnpm -v二.全局安装脚手架sudo cnpm install -g create-react-a原创 2021-05-07 13:59:39 · 1296 阅读 · 1 评论 -
React学习--生命周期函数(新)
一.对比新旧生命周期函数与旧生命周期函数相比,新的生命周期函数废弃了3个生命周期钩子,新增了2个生命周期钩子废弃的3个钩子函数:componentWillMount, componentWillReceiveProps, componentWillUpdate如果目前想在新版本中使用上述3个钩子函数,需要加UNSAFE_前缀,例如UNSAFE_componentWillMount新增2个钩子函数:getDerivedStateFromProps, getSnapshotBeforeUpdate二.原创 2021-05-04 19:24:59 · 385 阅读 · 1 评论 -
React学习---生命周期函数(旧)
一.生命周期函数名字:生命周期函数 = 生命周期钩子 = 生命周期回调函数 = 生命周期钩子函数componentDidMount 组件完成挂载时React调用componentWillUnmount 组件将要卸载时React调用render<div id="test"></div><script type="text/babel"> state = {opacity:1} death = () => { // 卸载组件 ReactDOM原创 2021-05-04 14:06:08 · 181 阅读 · 3 评论 -
React学习--高阶函数与函数柯里化
一.高阶函数如果一个函数符合下面2个规范中的任意一个,那么该函数就是高阶函数若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数常见的高阶函数有:Promise, setTimeout, arr.map()等等事例为受控组件的例子,因表单提交的事件回调可以统一放在一个函数中,所以采用高阶函数的方式class Login extends React.Component{ state = { username:'',原创 2021-05-03 14:10:57 · 159 阅读 · 0 评论 -
React学习--react中的事件处理(受控组件与非受控组件)
通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件,而不是使用原生的DOM事件 ----- 为了更好的兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)----- 为了更高效尽量减少ref的使用:如果发生事件的元素正好是要操作的元素,可以省略ref,通过event.target得到发生事件的DOM元素对象class Demo extends React.Component{ showData = (event) =>..原创 2021-05-03 13:17:17 · 139 阅读 · 0 评论 -
React学习--组件实例的三大核心属性之refs
一.字符串形式的refref相当于节点的标识字符串形式的ref会存在效率不高的问题<div id="test"></div><script type="text/babel">//创建组件class Demo extends React.Component{ showData = () => { const {input1} = this.refs alert(input1.value) } showData2 = () => {原创 2021-05-02 16:22:24 · 114 阅读 · 0 评论 -
React学习--组件实例的三大核心属性之props
一.展开运算符(即…运算符)展开和连接数组let arr1 = [1,3,5,7,9]let arr2 = [2,4,6,8,10]console.log(...arr1) // 1,3,5,7,9console.log(arr1) // [1,3,5,7,9]let arr3 = [...arr1,...arr2] // 连接数组console.log(arr3) // [1,3,5,7,9,2,4,6,8,10]在函数中使用function sum(...numbers){原创 2021-05-02 13:10:18 · 88 阅读 · 0 评论 -
React学习--组件实例的三大核心属性之state
一.js的原生事件绑定addEventListener<button id="btn1">按钮1</button><script>const btn1 = document.getElementById('btn1')btn1.addEventListener('click',()=>{ alert('按钮1被点击了')})</script>onclick<button id="btn2">按钮2</but原创 2021-04-28 21:29:10 · 150 阅读 · 2 评论 -
React学习--定义组件的两种方法
一.函数式组件举例如下:<div id="test></div><script type="text/babel">//1.创建函数式组件function MyComponent(){ console.log(this) return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent />,document.getE原创 2021-04-27 20:36:59 · 388 阅读 · 0 评论 -
React学习--优点及介绍
一.React的特点采用组件化,声明试编码,提高开发效率及组件复用率在React Native中可以使用React语法进行移动端开发使用虚拟DOM+Diffing算法,尽量减少与真实DOM的交互二.原生js的缺点原生js直接操纵DOM,浏览器会进行大量的重绘重排原声js没有组件化编码方案,代码复用率低原生js操作DOM的API繁琐,效率低三.babel的作用将ES6转成ES5将JSX装成JS四.简单案例//准备好一个容器<div id="test"><原创 2021-04-27 15:54:17 · 708 阅读 · 1 评论 -
总结自身开发中vue项目内遇到的问题及解决方法
一.修改el-input的border样式使用.el-input__inner进行样式css修改,如若无效则尝试/deep/.el-input__inner进行深度修改二.实现点击button进行页面跳转为button添加点击事件,@click="$router.push('path跳转路径')"原创 2021-04-22 19:59:10 · 202 阅读 · 0 评论 -
2021腾讯前端实习一面总结
问了好多服务器相关的知识,这个地方我几乎空白。。。一.从输入url地址到浏览器解析的全部过程DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结果二.为什么发送请求时,会出现页面空白的时间网络延迟三.浏览器缓存(协商缓存、协议缓存)四.303、304五.为什么JS代码要放在底部因为JS是单线程语言,会堵塞六.如果将JS代码放在顶部呢七.eventloop事件循环(宏任务、微任务)宏任务和微任务都是队列宏任务:如setTimeOut原创 2021-03-15 17:27:52 · 332 阅读 · 2 评论 -
2021腾讯前端笔试实习生
通过笔试发现自己的知识漏洞还有很多 难搞一.SSR(服务端渲染)的主要好处是首先什么是SSR呢? 即页面都是在后端将 html 拼接好的,然后返回给前端完整的 html 文件,浏览器拿到这个 html 文件之后就可以直接解析展示了,这也就是所谓的服务器端渲染。与服务端渲染相对应的就是客户端渲染:即后端不提供完整的 html 页面,而是提供一些 api 使得前端可以获取 json 数据,然后前端拿到 json 数据之后再在前端进行 html 页面的拼接,然后展示在浏览器上,这就是所谓的客户端渲染服务端原创 2021-03-15 17:11:45 · 855 阅读 · 3 评论 -
2021阿里实习一面总结
一面问的问题确实基础,基础到难以置信,现在已经裂开开始直接写CSS代码,着实懵逼了一.父子div布局,子div相对于父级垂直且水平居中的写法一共写出两种写法://flex布局.parent { display: flex; align-items: center; justify-content: center}.parent { width: 500px; height: 300px; background-color: skyblue; position: relative原创 2021-03-11 11:34:39 · 183 阅读 · 0 评论 -
Vue中Better-scroll滚动插件的基本使用
在移动端设计页面滚动时,往往希望它出现一定的效果,比如惯性滚动、弹簧效果等,那么原生的滚动就显得有些平淡了,这里推荐一下Better-scroll插件,它是在iscroll的基础上创新的,并且近期一直在更新,还是很适合使用的一.那么接下来看一下它的基本使用:BScroll中,父容器中只能嵌套一个元素,通常我们会把这个父容器的类取名为wrapper,一个wrapper中只能包含一个元素,而包含的元素内部可以嵌套多个元素父容器wrapper需要设置一定的高度,即height。此外通过overflow:h原创 2020-11-19 20:40:36 · 760 阅读 · 0 评论 -
axios框架的详细知识点大全
一.安装axios框架在vue项目中通过npm install axios --save进行安装二.axios的基本使用1.如果在axios中没有特指method是post还是get,会默认为get请求axios({ url:'www.baidu.com',}).then(res => { console.log(res)})2.如果url地址尾部带有参数,可以使用专门针对get请求的参数拼接:paramsaxios({ url:'www.baidu.com', params原创 2020-10-30 21:22:27 · 328 阅读 · 0 评论 -
Vuex中五个属性的详细说明,大全
一.vuex-state单一状态树如果状态信息保存到多个Store对象,那么后期的管理和维护会变得特别困难所以Vuex使用了单一状态树来管理应用层级的全部状态,即一个项目中只有唯一一个store,用来存储所有的状态信息单一状态树能够让我们更直接的方式找到某个片段的状态,方便维护和管理二.getters的基本使用1.getters可以视为计算属性,当数据需要变化后再传给其他组件时,可以使用getters,默认传入state参数getters:{ powerCounter(state){原创 2020-10-29 19:22:26 · 4931 阅读 · 0 评论 -
Vuex的基本使用以及访问和修改状态的方法
一.Vuex的定义Vuex是一个专门为 Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件状态。vuex提供了一个在多个组件间共享状态的插件,做到了响应式。那么状态管理到底是什么呢?我们可以简单的将其看成把多个组件共享的变量全部存储在一个对象里面然后把这个对象放在顶层的Vue实例中,让其他组件都可以使用二.Vuex具体管理哪些状态比如用户的登录状态、用户名称、头像、地理位置等比如商品的收藏、购物车的物品等三.Vuex的使用1.因为Vuex属于一个插件,要想使原创 2020-10-29 14:44:12 · 1837 阅读 · 0 评论 -
vue中文件路径的引用问题
在项目中,我们通常需要引用文件路径,但是多个…/…/会导致文件查找出现问题,所以一种常用的解决方法是在下图的配置文件中,添加对应的别名:当添加好别名后,对于import导入的路径,直接使用就可以而对于html中的src路径,需要用src="~assets/img/home.jpg"格式,即在路径前加~号...原创 2020-10-27 21:57:21 · 762 阅读 · 0 评论 -
keep-alive保持页面状态及相关两种属性
一.使用keep-alive保持页面状态我们发现页面在每次点击时都会被created,而当点击其他页面时,原页面就会被destoryed。即每次重新点击原页面时,都是重新创建一个新页面。若我们希望,当跳转到其他页面后,再次返回原页面时,能够保留之前的内容,该怎么办呢?答:此时可以考虑用<keep-alive>标签保持状态,让页面不用每次都被创建1.首先在App.vue中添加keep-alive标签2.其次在对应路由组件中,创建activated和beforeRouteLeave方原创 2020-10-27 15:44:43 · 982 阅读 · 0 评论 -
Vue-router中的导航守卫(前置守卫、后置钩子)
一.前置守卫现在我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?网页标题是通过<titile>来实现的,但是SPA只有一个固定的HTML,切换不同的页面时,标题并不会改变那么在Vue项目中,要怎么修改呢?此时就可以使用导航守卫导航守卫的作用:监听路由跳转的过程实现代码如下:利用beforeEach方法来完成标题的修改首先在映射中定义一些标题,用meta元数据来定义const routes = [ { path:'/user/:abc', compone原创 2020-10-27 14:22:30 · 1480 阅读 · 0 评论 -
vue-router的两种参数传递方式:params和query
一.vue-router参数传递1.传递参数的方式传递参数主要有两种类型:params和queryparams的类型:传一个值时,用params配置路由格式:/router/:id (与之前的动态路由相似)传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123,/router/abcquery的类型如果传入数据较多时,用query,因为query传入的是一个对象配置路由格式:/router,也就是普通配置传递的方式:对象中使用query的key作原创 2020-10-26 20:41:31 · 1649 阅读 · 0 评论 -
vue-router路由懒加载以及嵌套路由的实现
一.vue-router打包文件的解析在vuecli中,打包文件夹dist下会分为css和js文件夹,分别存储css和js打包代码。而在js文件夹下又分为三部分:app: 存放当前应用程序开发的所有代码(业务代码)manifest: 为了打包的代码做底层支撑vendor: 提供商,第三方(如vue、vue-router、axios)二.认识路由的懒加载当我们在打包构建应用时,打包后的app.js包会变得非常大,甚至会影响到静态资源服务器的查询时间,导致页面加载时间过长。如果我们能把不同路原创 2020-10-26 19:29:30 · 424 阅读 · 0 评论 -
Vue中动态路由的具体实现流程
一.动态路由在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下路径/user/aaaa或/user/bbbb除了有前面的/user之外,后面还跟上了用户的ID这种path和Component的匹配关系,称之为动态路由具体实现代码如下:1.首先我们需要在router文件夹下的index.js下,添加新的映射关系const routes = [ { path:'/user/:abc', // abc可以替换成其他的名字 componen原创 2020-10-26 15:51:44 · 1458 阅读 · 1 评论