- 博客(19)
- 收藏
- 关注
RSS订阅原创 React组件通信方式
前言：组件通信就是一个组件把自己的数据传递给另一个组件。1.组件间的关系 1）父子组件 2）兄弟组件（非嵌套组件） 3）祖孙组件 (跨级组件)2.通信方式 1）props 2）消息订阅发布模式：pubs-sub, event 3)集中式状态管理： redux 4)生产者-消费者模式： conText3.具体使用场景 1）父子组件： pro...
2021-08-05 20:26:18
127
原创 React中的Hook
前言：React有两类组件，函数组件和类组件，但是在类组件的书写过程中会有大量的冗余代码，而且要处理在整个类里面this的问题，但是只有在类组件里面有state和生命周期函数这两个特性。同时，为了解决在组件之间复用状态逻辑很难、复杂组件变得难以理解等问题，React在16.8中新增了Hook。Hook就是一个特殊的函数，它可以让你“钩入”React的特性1.Hook就是js函数，使用有以下规则 1)只能在函数最外层调用Hook。不要在循环，条件判断或者子函数中调用 2...
2021-08-05 15:53:19
369
原创 react中的路由传参方式
前言：通过路由传递完参数以后，要想在对应组件内获取，可以通过props属性。凡是使用路由跳转到的组件，在内部都可以使用props获取路由信息，这时的props上主要有三个对象，history、location、match.1.通过Link组件中to属性，把参数写在path后面，类似于get请求，会把参数携带在请求地址后面<Link to="/user?id=55">用户管理</Link>在组件内获取参数可以使用props.location.search获取，因为获取到的
2021-08-03 21:31:15
327
原创 redux中使用immutable.js
1.immutable.js简介Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量...
2021-07-31 11:43:20
374
原创 react事件处理
前言：在react事件处理中主要是弄明白三个问题，1）this指向 2）如何给事件处理函数传递参数 3）如何获取事件对象import React, { Component } from 'react'export default class App extends Component { state = { num: 10 } change() { this.setState({num: this.state....
2021-07-28 09:01:27
106
原创 函数组件和类组件
前言：react中创建组件有两种方式，函数创建和ES6的类创建，使用函数创建出来的组件叫做"无状态组件"，使用类创建出来的叫做"有状态"组件。1.函数组件在创建时，需要满足两个条件：1）该函数必须要有返回值； 2）必须返回一个jsx2.类组件 创建组件的子类: 1)必须要继承react.Component 2)必须要重写父类的render（）方法3.函数组件和类组件两者的区别（灵魂三问） 是否有this 是否有生命周期 是否...
2021-07-27 19:17:28
611
原创 webpack--一个用于现代javascript应用程序的静态模块打包工具
1.为何要使用webpack 1）解耦需要：使用SPA（Single-page Application，单页面应用）开发大型项目时，解决模块之间的解耦和维护问题； 2）前端工程化需要：前端开发逐渐向工程化演进，理解前端框架的项目构建的流程（很多框架使用脚手架搭建项目都是基于webpack） 3)项目扩展需要：理解Webpack核心概念（如Babel加载器、Plugin插件），便于项目协同开发与项目整合。2.webpack和gulp的区别 ...
2021-07-26 22:29:42
266
原创 解决vue项目 Avoided redundant navigation to current location
在vue项目中重复点击导航会报错，大概意思就是避免冗余导航。解决方法：重写路由原型上的push方法，把这段代码加载router文件夹下的index.js文件里const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}...
2021-07-25 17:11:39
264
原创 Vue响应式原理 (你认为的理所当然)
前言：vue实例中的data的属性发生改变，页面也会发生对应的变化，那么是如何实现的呢？其实vue底层已经做了很多事。这解析出来主要就是在解决两个问题，怎么监听到data属性的改变；data属性改变以后，vue是怎么告诉页面中使用该属性的位置发生变化，界面发生刷新，而vue又是怎么知道哪些位置使用了该属性。1.怎么监听data属性的改变 使用Object.defineProperty监听const app = new Vue({ el: '#app', data:...
2021-07-23 10:45:02
61
原创 V-model的修饰符
v-model经常用在表单元素中实现双向数据绑定（v-model绑定的变量的值和表单元素的value值进行绑定，只要其中一个数据发生变化，另一个也会响应数据变化），有3个修饰符1.lazy：懒加载，只有表单元素失去焦点，才会进行双向数据绑定2.number: 如果表单中输入的内容是以数字开头，则截取数字部分；如果开头就不是数字，那么拿到的是输入的全部内容3.trim： 去掉首尾空白...
2021-07-22 10:42:26
467
原创 回流和重绘
什么是回流？当render tree中的部分(全部)因为元素的尺寸、布局、隐藏等改变而需要重新构建，这就被称为回流。每一个页面至少有一次回流，就是页面第一次加载的时候，因为这时就需要构建render tree。浏览器会使渲染树中受影响那部分暂时失效，然后重新构建这部分，完成回流后，会将受影响的部分重新绘制到屏幕中，这就称重绘。什么是重绘？当render tree中一些元素的属性需要更新，而这些属性只会影响元素外观，不会影响布局，比如background-color,这时就会发生重绘。回流和重
2021-07-20 10:19:54
153
原创 导航守卫
前言：导航守卫一共被分为3类：全局守卫，单个路由独享守卫，组件内守卫。导航：表示路由正在发生改变谨记：参数或查询的改变并不会触发进入/离开的导航守卫，可以使用beforeRouteUpdate来应对这些变化，或者通过观察$route一、全局守卫 1.全局前置守卫 //一般是写在main.js里router.beforeEach((to, from, next) => { //模拟登录检测 const token = fa...
2021-07-19 10:26:49
162
1
原创 Vuex
VuexVuex的核心概念包括： State:对象类型，所有的数据对象 Getters:对象类型，用于声明一系列的属性，用法类似于computed,也有缓存，当所依赖的state数据发生变化时，会重新计算 Mutations:对象类型，用于声明所有直接操作State对象的函数，所声明的函数有2个参数，第一个参数为state对象，参数2为提交当前方法时所传递的参数 Actions: 对象类型，用法类似于Mutations,不同的是该对象中声明...
2021-07-19 09:40:09
81
原创 axios 易用、简洁且高效的http库
前言：在js中，我们都是通过ajax发送异步请求，而我们在异步末尾需要做一些事，比如说用响应体去渲染页面，这时就需要用到回调函数，使用promise是用来解决回调地狱的，后来的jquery把ajax进行了封装，虽然解决了兼容性问题，但是并没有解决回调地狱的问题。后来官方直接封装了fetch（XMLHttpRequest + promise）方法，可以直接使用。在vue2.0之后，很多人开始使用axios发送异步请求，axios也是基于XMLHttpRequest 和promise进行封装的，功能比fetc.
2021-07-15 19:57:03
272
1
原创 vue 选项（不看会后悔哦！！！）
vue选项在vue学习中是很重要的一部分内容，因此很有必要总结一下，此篇涉及的都是很常用的一部分选项，要想了解全部选项，go toVue API选项都是可以直接写在vue实例下的，被分为了几类：数据选项 DOM选项 生命周期钩子 选项 资源选项 组合选项 其他选项一、数据选项 data 1.类型：Object | Function 2.在组件内必须要被声明为一个返回初始数据对象的函数，因为组件可能会被用...
2021-07-11 20:50:30
1194
1
原创 Vue Router
谈谈 Vue RouterVue Router是Vue.js的一个核心插件，使用Vue Router 和 Vue.js可以很自然地实现单页面应用。既然是插件，在使用之前就需要去下载，创建项目的时候配置了Vue Router，就会在创建项目同时下载Vue Router.项目创建好之后，就会在项目文件src/router/index.js中自动实例化一个VueRouter对象。如下，mode指的是当前路由实例使用的模式，有history和hash两种;base获取的是当前IP地址，routes的值是一个
2021-07-10 12:14:39
211
2
原创 数组去重（上）
数组去重是js学习者学习数组时通常会遇到的一个问题，也是面试会碰到的一个问题。在下文我分享几个数组去重的方案。这是一个待去重的数组 [10,10,20,50,50,30,30,30,20]方案1：step1：利用sort(),先将数组升序或者降序排列。step2：因为数组是排好序的，只要将当前数据和相邻的下一个数据做比较，判断是否相等，即 是否重复。如果有就把当前数据删除，再去判断是否还有重复数据，直至没有一个数据与当前数据相等。step3：遍历数组，将数组中的每一个数据都去执行step2。c
2021-05-16 14:34:26
162
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人