2019年08月_congboer

原创 Flux流程

Flux流程1、要想使用FLux架构思维，需要通过一个工具进行使用，这个工具就是flux2、安装 flux $ yarn add flux3、在src目录下新建store目录，里面新建index.jsstore有两个功能存储数据当数据发生改变时，视图要进行更新（当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅）...

2019-08-25 17:11:05 212

原创 React配置反向代理、路由（展示、导航、组件）、better-scroll、1px兼容、数据请求时loading效果、react-hooks、lodash、immutable.js

React的一些点1、配置反向代理：在 src 目录下新建一个名为setupProxy.js的文件（必须是这个文件名），先要安装cnpm i http-proxy-middleware -D,再const proxy = require('http-proxy-middleware')引入。const proxy = require('http-proxy-middleware')mo...

2019-08-25 16:04:51 1067

原创 Vue知识点小小小总结

1、原理性：vue双向数据绑定：我们使用v-model这个指令来实现，数据改变，视图改变，视图改变，数据也随之改变，vue是通过数据劫持和订阅发布来进行深入响应的，数据劫持指的是，vue通过es5的Object.defineProperty属性对data选项中的数据进行getter和setter设置，订阅发布指的是vue通过之定义自定义事件将data的变化反映到视图上去，vue通过o...

2019-08-22 09:03:58 313

原创 React之高阶组件

React之高阶组件import React,{Component,Fragment} from 'react'import Test1 from './Test1.js'import Test2 from './Test2.js'/** 1、高阶组件：是一个函数，接收一个参数，参数是一个组件* 2、高阶组件的作用：让外层函数帮助内层组件完成任务，内层组件直接使用结果* 3、一些共...

2019-08-17 14:51:17 116

原创 React的组件通信方式

React的组件通信方式1、父子组件通信实现途径：通过属性绑定的形式（在父组件的模板中子组件的标签上，自定义属性，子组件通过props来接收）这里由于render(){ }函数是触发两次(初始化渲染时一次，数据修改渲染时再一次)，所以，如果是发送请求得到数据，这里要先判断这个数据有没有，用短路逻辑，如果有，再渲染，如果第一次没有，比如就定义了这个状态数据，而值为null，渲染就会报错。父...

2019-08-17 09:34:53 213

原创 ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML

1、一般针对输入框：推荐用第二种<input type = "text" ref = "inp"/>通过this.refs.inp可以访问这个input框即：this.refs.inp.value就是input框里面的内容<input type = "text" ref = { el => this.inp = el }/>通过el就会少一层，el代表的...

2019-08-16 20:47:39 717

原创 React的组件创建、样式写法、数据的状态和属性、属性验证prop-types

React的组件创建、样式写法、数据的状态和属性、属性验证prop-types一、组件的创建1、函数式组件（无状态组件 prueCcmponent）import React,{Fragment} from 'react'function Comp(){ return ( <Fragment> <div>content</di...

2019-08-16 09:24:28 869

转载前端框架级之数据请求的axios和fetch方法

前端框架级之数据请求的axios和fetch用法此之前，看到了Vue，了解到了前端的3种框架级的数据请求方法：axios（第三方库）fetch（js原生）Vue.resource（这是Vue自己封装使用的类库，但比较久以前，其作者就已经放弃更新了，Vue.resource的用法和axios相似度很高 >90%,Vue2.0基本上用的都是前两者了，Vue.resource有...

2019-08-06 14:44:46 482

原创前端性能优化方式

前端性能优化方式一、加载优化：（最耗时）1、减少 HTTP 请求：浏览器一般同时响应请求为4个请求（PC 一般为4个，Android 支持4个，IOS 5后可支持6个），所以尽量减少页面的请求数，首次加载同时请求数不能超过4个。（Webpack打包等）2、合并 CSS、 JavaScript代码3、合并小图片、使用精灵图，base-64（减少一次http请求）4、缓存：使用缓存可以减少...

2019-08-05 08:27:03 330 1

转载 Webpack的一些配置

Webpack一、市面上有哪些类似于Webpack的前端工程化工具【自动化工具】gruntgulp ( 现在已经4.x版本了 )Browserify ( Webpack 前身，只能处理js )Webpack 【主流行】rollup.js https://www.rollupjs.com/guide/zh 【小众】parcel 【小众】FIS https://...

2019-08-04 18:17:30 145

原创 Vue的脚手架工具cli安装

vue项目的快速构建工具 cli 【脚手架】什么是cli?cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpackcli目前有哪些版本？cli2 cli3cli3对电脑的配置有一定要求cli如何使用？cli的安装npm/cnpm/yarn 都可以使用【 npm和yarn 配置国内镜像】使用国内镜像加速npm和yarn...

2019-08-01 22:10:38 519

原创 Vue自定义指令、混入mixin、自定义插件、异步组件、过渡和动画

1、自定义指令业务: 当我第一次打开页面时，自动获取搜索框的焦点，用一个指令实现<body> <div id="app"> <input type="text" v-focus> </div></body><script src="../../lib/vue.js"></script>...

2019-08-01 22:05:17 452

原创 vue列表循环非响应式情况

vue列表循环非响应式情况数组的length无法响应处理手段：使用 arr = null arr.splice( 0 )当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue处理手段: Vue.set / this.$set例子：<body> <div id="app"> ...

2019-08-01 21:59:51 259

原创合并对象、获取对象所有键、获取对象所有值

1、Object.assign({ },obj1,obj2) 对象的合并第一个参数为一个空对象第二、三个为要参与合并的对象如果obj1中的键在obj2也有同样的键，那么合并后，obj1中的会被覆盖掉，只显示obj2中的2、var arr = Object.keys( obj )会将obj对象中的所有键取出来，组成一个数组，而值剔掉3、var arr = Object.valu...

2019-08-01 21:56:30 608

congboer的博客