小胖橘乐乐-优快云博客

原创 js数组去重的5种方法

js数组去重五种方法今天来聊一聊JS数组去重的一些方法，包括一些网上看到的和自己总结的，总共5种方法（ES5）。第一种：遍历数组法这种方法最简单最直观，也最容易理解，代码如下： var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2] var newArr = [] for (var i = 0; i < arr.length; i++) { ...

2019-02-22 20:31:54 6089

原创 React---新扩展RenderProps和ErrorBoundary

一、renderprops 1.如何向组件内部动态传入带内容的结构(标签)? Vue中: 使用slot技术,也就是通过组件标签体传入结构<AA><BB/></AA> React中: 使用childrenprops:通过组件标签体传入结构使用renderprops:通过组件标签...

2021-05-12 21:50:00 348

原创 React---新扩展Context和组件优化

一、Context 1. 理解　　一种组件间通信方式,常用于【祖组件】与【后代组件】间通信 2. 使用　　1)创建Context容器对象：　　constXxxContext=React.createContext() 　　2)渲染子组时，外面包裹xxxContext.Provider,通过value属性给后代组件传递数据：　　<xxxConte...

2021-05-11 21:24:00 322

原创 React---新扩展Hooks和Fragment

一、Hooks 1.ReactHook/Hooks是什么? 　　(1).Hook是React16.8.0版本增加的新特性/新语法　　(2).可以让你在函数组件中使用state以及其他的React特性 2.三个常用的Hook 　　(1).StateHook:React.useState() 　　(2).EffectHook:React.useEffect() 　...

2021-05-10 21:44:00 410

原创 React---新扩展setState和lazyLoad

一、setState 1.setState更新状态的2种写法 (1).setState(stateChange,[callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数,它在状态更新完毕、界面也更新后(render调用后...

2021-05-07 20:59:00 257

原创 React---react-redux的使用

一、基本使用　　　 (1).明确两个概念： 1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。 2).容器组件：负责和redux通信，将结果交给UI组件。 (2).如何创建一个容器组件————靠react-redux的connect函数 ...

2021-05-06 21:30:00 296

原创 React---Redux异步action

一、分析　　 (1).明确：延迟的动作不想交给组件自身，想交给action (2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。 (3).具体编码： 1).npm addredux-thunk，并配置在store中 2).创建action的函...

2021-04-29 21:52:00 336

原创 React---Redux的基础使用

一、Redux理解 1. 学习文档英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux 安装 npm install --save react-redux npm install --save-dev redux-devtools 2. re...

2021-04-28 21:40:00 154

原创 React---antd的按需引入和自定义主题

一、antd的按需引入+自定义主题 1.安装依赖：npm install react-app-rewiredcustomize-crababel-plugin-importlessless-loader antd 2.修改package.json .... ...

2021-04-27 21:28:00 328

原创 React---路由组件传参

一、向路由组件传递参数 1.params参数路由链接(携带参数)：<Linkto='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Routepath="/demo/test/:na...

2021-04-26 21:03:00 364

原创 React---路由的使用(二)

一、NavLink 　　NavLink可以实现路由链接的高亮，通过activeClassName指定样式名 <NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink> <NavLink activeClassName="demo" classNam...

2021-04-25 21:01:00 146

原创 React---路由的使用(一)

一、SPA的理解单页Web应用(single page web application，SPA)。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。二、路由的理解什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component 路...

2021-04-24 20:04:00 169

原创 React---消息订阅发布机制

一、PubSubJS的使用工具库: PubSubJS 下载: npm install pubsub-js --save 使用: 1)import PubSub from 'pubsub-js' //引入 2)PubSub.subscribe('delete', function(data){ }); //订阅 3)PubSub.publish('delete', data) //发布...

2021-04-23 21:20:00 217

原创 React---发送Ajax请求

1. 理解 1.1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装) jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 1.2. 常用的ajax请求库 1)封装XmlHttpRequest对象的ajax 2)p...

2021-04-22 21:46:00 1032

原创 React---使用react脚手架搭建项目

一、使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: re...

2021-04-21 21:42:00 1176 1

原创 React---虚拟DOM与DOM Diffing算法

一、key的作用 1.虚拟DOM中key的作用： 1).简单的说:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用。 2).详细的说:当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚...

2021-04-20 22:16:00 366

原创 React---高阶函数和函数柯里化的理解

一、高阶函数　　如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map(...

2021-04-19 21:19:00 358

原创 React---组件的生命周期

一、理解组件从创建到死亡它会经历一些特定的阶段。 React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。二、生命周期流程图(旧) 生命周期的三个阶段(旧) 1. 初始化阶段:由ReactDOM.render()触发---初次渲染 constructor() componentWillMount...

2021-04-19 21:02:00 830

原创 React---组件实例三核心属性（二）props

一、理解每个组件对象都会有props(properties的简写)属性组件标签的所有属性都保存在props中通过标签属性从组件外向组件内传递变化的数据二、作用注意: 组件内部不要修改props数据内部读取某个属性值三、编码操作内部读取某个属性值　　　　this.props.name 　　 2. 对props中的属性值进行类型限制和必要性限制　　　　第一种方式(...

2021-04-16 21:29:00 178

原创 React---组件实例三大核心属性（一）state

一、理解 state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 二、强烈注意组件中render方法中的this为组件实例对象组件自定义的方法中this为undefined，如何解决？　　　　a)强制绑定this: 通过函数对象的bind() 　　　　b)箭头函...

2021-04-15 22:02:00 145

原创 React---面向组件编程

一、基本理解和使用 1. 使用React开发者工具调试 2. 效果函数式组件： <script type="text/babel"> //1.创建函数式组件 function MyComponent(){ console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 ...

2021-04-14 21:18:00 159

原创 React---学习开篇

忙了一段时间后，终于解放了，歇歇脚开始学习React。近年来，React框架在某些大厂用的还是比较多的，作为本人技术的空白，我准备恶补一下，好好学习，天天向上，加油！一、React的特点声明式设计——React采用声明式范式，可以轻松描述应用高效——React通过对DOM的模拟，最大限度地减少与DOM的交互灵活——React可以与已知的库或框架很好地配合 JSX——JSX是JavaSc...

2021-04-12 22:36:00 109

原创 Angular--Module的使用

Angular 是一个用html 和typescript构建客户端应用的平台与框架。它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。 1. 模块Module Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。 Angular 应用就是由一组NgModule定义的。 NgModule 可以将其组件和一...

2020-04-17 16:07:00 1215

原创 Angular-cli 搭建项目

一、首先需要安装node和npm 　　查看你的node以及npm版本：　　node -v 查看node版本　　npm -v 查看npm版本　　要求所有版本都是最新的，不然可能会出错。　　设置淘宝镜像，这样下载东西就是从国内网站下载了，网速更快 npm configset registry https://registry.npm.taobao.org 二、安装type...

2020-04-17 15:57:00 219

原创 JS执行上下文栈和作用域链

一、JS执行上下文执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行。执行上下文类型分为：全局执行上下文和函数执行上下文。执行上下文创建过程中，需要做以下几件事: （1）创建变量对象：首先初始化函数的参数arguments，提升函数声明和变量声明。（2）创建作用域链（Scope Chai...

2020-04-05 20:03:00 944

原创详解Promise的用法(含ES7)

一、Promise 的基本语法 1 <script> 2 // 基本语法 3 new Promise((resolve, reject) => { 4 // resolve reject本身也是函数，如果我们是一个成功的操作（异步操作）就调用 resolve, 5 ...

2020-04-05 19:58:00 686

原创快速学会Vuex的使用

一、Vuex简介官方定义 Vuex是一个专门为Vue.js应用程序开的状态管理模式它采用集中式存储管理应用的所有组件的状态并以相应的规则保证以一种可预测的方式发生变化二、应用场景多个视图依赖于同一状态来自不同视图的行为需要改变同一个状态三、Vuex组成介绍 State——数据仓库，存储所有数据状态 Getter——用来获取数据的 Mutation——...

2019-09-30 13:57:44 170

原创快速学会使用Vuex

一、Vuex简介官方定义 Vuex是一个专门为Vue.js应用程序开的状态管理模式它采用集中式存储管理应用的所有组件的状态并以相应的规则保证以一种可预测的方式发生变化二、应用场景多个视图依赖于同一状态来自不同视图的行为需要改变同一个状态三、Vuex的安装和组成介绍 State——数据仓库，存储所有数据状态 Getter——用来获取数据...

2019-09-30 13:49:00 245

原创小程序---微信本地存储的方法

我们在开发的过程中，常常会用到本地存储，下面我给大家分享一下微信本地存储的使用。一、数据支持需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。二、方法 1、同步（1）wx.setStorageSync(); //存储值 try { wx.setStorageSync('key', 'value') } catch ...

2019-06-02 19:13:17 10464

原创小程序---微信本地存储的方法使用

小程序---微信本地存储的方法使用我们在开发的过程中，常常会用到本地存储，下面我给大家分享一下微信本地存储的使用。一、数据支持需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。二、方法 1、同步（1）wx.setStorageSync(); //存储值 1 try { ...

2019-06-02 19:00:00 2578

原创小程序---调用后端接口的方法

小程序---调用后端接口的方法学习小程序一段时间了，写页面对我来说没有任何问题。最近学习如何请求后端接口，本来想请求项目中正在用的接口，可是无缘，微信小程序不允许。官方给出的提示是，接口必须有域名且备案，我就无语了，我们的接口都是ip地址，所以我只能呵呵了。不过，也没太大关系，重点是学习方法。下面，我简单说一下官方给出的请求接口的方法。一、官...

2019-03-25 21:22:00 14207

原创小程序入门---开发工具的使用

小程序入门---开发工具的使用小程序发布到现在已经2年零2个月了，现在越来越多的企业倾向于开发小程序。作为一位前端开发人员，虽然对小程序有所耳闻，却一直没有尝试去做。只是觉得很火的样子，今天突然有了点兴趣，就学习了一下，觉得还真不错！下面我简单聊一下小程序开发工具的使用以及相关入门知识。一、申请注册小程序　　使用一个没有注册过微信公众号和...

2019-03-10 21:37:00 329

原创 js数组去重五种方法

js数组去重五种方法今天来聊一聊JS数组去重的一些方法，包括一些网上看到的和自己总结的，总共5种方法（ES5）。第一种：遍历数组法这种方法最简单最直观，也最容易理解，代码如下： 1 var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2] 2 var newArr = [] 3 for (var i = 0;...

2019-02-22 20:17:00 185

原创 ES6之Promise用法详解

ES6之Promise用法详解一前言本文主要对ES6的Promise进行一些入门级的介绍。要想学习一个知识点，肯定是从三个方面出发，what、why、how。下面就跟着我一步步学习吧~ 二什么是Promise 首先是what。那么什么是Promise呢？以下是MDN对Promise的定义 The Promise object is use...

2019-02-18 22:54:00 209

原创 Vue项目部署问题及解决方案

Vue项目部署问题及解决方案 Vue项目部署问题及解决方案 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，hash 的值为 #/hello。特点：hash 虽然出现 URL 中，但不会被包含在 HTTP...

2019-01-15 20:57:00 315

原创 Vue---导航守卫使用方法详解

Vue---导航守卫使用方法详解导航守卫正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的...

2018-12-22 22:14:00 1310

原创深入理解Vue的生命周期

　　谈到Vue的生命周期，相信许多人并不陌生。但大部分人和我一样，只是听过而已，具体用在哪，怎么用，却不知道。我在学习vue一个多礼拜后，感觉现在还停留在初级阶段，对于mounted这个挂载还不是很清楚。放大说，对vue的生命周期不甚了解，这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。所以，弄清楚生命周期是非常有必要的。...

2018-11-29 20:16:00 288

原创 Bootstrap中datetimepicker日期控件1899年问题解决

　Bootstrap中datetimepicker日期控件1899年问题解决　　最近在开发项目的过程中，遇到一个很尴尬的问题。我们项目一直采用的是angular+bootstrap，日期控件用的是bootstrap中的datetimepicker，这个日期控件存在一个bug，当用户输入日期时，日期控件会自动跳到1899年，这个用户体验特别不好，一不小心就可能点错了。因为我们的项目中涉及的日期非...

2018-11-18 20:15:00 979

前端页面规则.docx

空空如也