twinkle_J-CSDN博客

原创《深入React技术栈》个人总结之1.6React与DOM（打卡五）

在React组件的开发实现中，我们并不会用到ReactDOM，只有顶层组件以及由于React模型所限而不得不操作DOM的时候，才会使用它。1.6.1 ReactDOMfindDOMNode render unmoutComponentAtNode(很少使用，是个用于卸载的操作) 1.findDOMNodeDOM真正被添加到HTML中生命周期方法是componentDidMount...

2018-12-11 14:22:41 283

原创《深入React技术栈》个人总结之1.5React生命周期（打卡四）

React组件的生命周期根据广义定义描述：分为挂载，渲染和卸载这几个阶段。当渲染后的组件需要更新时，我们会重新去渲染组件，直至卸载组件。因此,React组件分为两大类：当组件在挂载或卸载时当组件接收新的数据时，即组件更新时。React生命周期函数：组件加载的时候触发的周期函数 constructor 数据初始化 componentWillMou...

2018-12-10 15:02:17 286

原创《深入React技术栈》个人总结之1.4React数据流（打卡三）

其实单纯的react并不是一个框架，在其官网上就有这么说明：react是个view js 库。今天开始学习React数据流（之后会学习redux），接下来就会带领大家进入编码世界。在React中，数据是之上而下的单项数据流（vue也是单向数据流且是双向数据绑定“v-model”指令），即从父组件到子组件。这条原则让组件关系变的简单且可预测state与props是react组件中一个很重...

2018-12-08 18:50:00 282

原创《深入React技术栈》个人总结之1.3React组件（打卡二）

第一章第三小节：React组件今天学习了组件的发展历史，以及组件的定义，react组件的定义。1.3.1 组件的演变狭义上的组件（UI组件），比如Tabs组件。组件主要围绕在交互动作上的抽象，针对这些交互动作，利用javascript操作DOM结构或style样式来控制。（UI组件一定会有3部分组件：结构、样式和交互行为，分别对应着HTML、CSS、javascript。）广义上...

2018-12-05 23:55:17 298

原创物流步骤UI组件（react）

突然间，发现自己写个好多组件，等闲下来，到时候，自己写个UI组件库，哈哈哈。这个组件还能进行优化，思路是有但是栏主感觉不好上手。废话不说啦看代码吧stepsFew.jsximport React,{ Component } from 'react'import './index.less'export default class StepsFew extends Comp...

2018-12-05 12:18:55 750

原创 js执行机制

当我们打开一个网页的时候，我们的代码一般以为是从上至下依次执行每行代码。实际上则不然，看下下面的例子<script> setTimeout(function(){ console.log('定时器开始啦') }); new Promise(function(resolve){ console.log('马上执行for循环啦'); ...

2018-12-04 23:02:26 141

原创《深入React技术栈》个人总结（打卡一）

虽说已经在用React写了些项目，起初刚开始的时候并不喜欢react框架（之前是用vue的），到了后面才发现React的好处，深深陷进去了，所以买了本书《深入React技术栈》，细细解读这款框架的魅力今天阅读了第一章节两小节1.1.1 React的简介react与angular等框架不同，并不是完整的MVC/MVVM框架。它更专注于view层的解决方案，也是一个包括View和Contr...

2018-12-04 22:48:38 743

转载从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。----------超长文+多图预警，需要花费不少时间。----------如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。----------正文开始----------最近发现有不少介绍JS单线...

2018-11-27 11:54:45 228

原创 react 上拉加载

今天项目有个上拉加载的需求，ui框架用的是antd-mobile，然而框架提供的上拉加载，看不懂，很想搬砖，但是怕在这块耗得时间过长，所以就自己造了个上拉加载轮子需要的可以参考下import React, { Component } from 'react';import './myFeedBack.less';import Header from '@/componen...

2018-11-23 15:50:46 670

原创 reactjs-swiper 在react项目中实现轮播

1.快速新建项目npx create-react-app swiper2.安装依赖yarn add reactjs-swiper axios --save-dev3.文件目录App.jsimport React, { Component } from 'react';import './App.scss';import SwiperBar from './Swip...

2018-11-14 16:50:19 4690 2

原创 Mobx中装饰器语法的环境配置

1.快速新建一个项目npx create-react-app mobx-reactcd mobx-reactyarn eject报错的话执行以下操作git add .git commit -m "aa"2.安装依赖包yarn add babel-plugin-transform-decorators-legacy @babel/plugin-proposal-dec...

2018-11-12 18:06:32 622

原创 react 引用antd的表单组件

/* * @Author: Twinkle * @Date: 2018-11-07 11:34:48 * @Last Modified by: Twinkle * @Last Modified time: 2018-11-07 14:29:15 */import React, { Component } from 'react';import './App.less';imp...

2018-11-07 14:37:11 1035 1

原创 Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置

一：创建一个react项目npx create-react-app project二：暴露所有内建的配置(注：我这里用的是yarn)yarn eject注：如果yarn eject 报错的解决的方法git add .git commit -m 'aa'yarn eject三：使用babel-plugin-import实现Antd按需加载，并修改package.jso...

2018-11-07 11:37:16 719

转载 react项目实现登录注册

eact项目中实现登录注册简单粗暴感悟全局安装react官方推荐脚手架 create-react-appnpm install create-react-app -g创建react项目create-react-app react-login-register进入项目并运行npm startimage.png安装此demo中各种依赖 npm i...

2018-11-05 17:16:44 13235 4

转载 react实现选项卡

一、首先是Showcase效果传送门二、如何实现既然用React写，那么它就必然是一个组件，首先考虑你怎么使用这个组件，也就是这个组件的接口是怎么样的。<TabsControl> <Tab name="red"> <div className="red"/> </Tab> <Tab name=&quot

2018-10-31 15:06:09 4667

原创 reset.css

/* reset */html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu{margin:0;p...

2018-10-30 14:38:44 187

原创 vue源码解读（一）

vue源码的目录结构vue源码根目录下有很多文件夹，以下是各文件夹存放的文件说明Vue |— build 打包相关的配置文件，其中最重要的是config.js。主要是根据不同的入口，打包为不同的文件。 |— dist 打包之后文件所在位置 |— examples 部分示例 |— flow 因为Vue使用了Flow来进行静态类型检查，这里定义了声明...

2018-10-29 15:57:45 288

转载 webpack4：从0配置到项目搭建

webpack4：从0配置到项目搭建webpack4发布以来，我写项目都是用脚手架，即使再简单的项目，真的是really shame。。虽然道听途说了很多 webpack4 的特性，却没有尝试过，因为它给人的感觉就是，em...很难。但是今天我从最简单的部分开始，一点点搭建起一个项目。0配置，配置了什么让我们从0开始，新建一个项目，在终端执行以下语句：mkdir webpack-...

2018-10-25 11:20:23 480

原创 react ssr 服务器端渲染(一)

服务器端渲染的特性：页面上的内容在服务器上生成好了，浏览器从服务器上拿到内容，然后在页面上显示客户端渲染与服务器端渲染流程客服端渲染不利于SEO（搜索引擎优化，网站排名）...

2018-10-24 14:13:25 410

前两天公司领导对员工进行岗位职责边缘划分，老大问我：“未来职场规划？”，我说：“我想成为全栈工程师！”。虽然我在公司一直做前端开发，但是作为前端工程师我总是妄自菲薄感觉自己像个门外汉，技术太浅登不得大雅之堂。所以一直想学一门后台语言，我就可以参与到公司数据结构的设计，继而进入公司核心领导层（晋职加薪~哈哈!）。而不是像现在一样“大事决定不了，小事帮不上忙~”。老大说：“一法通，万法通。把一门编程语...

2018-10-22 10:23:50 1726 1

转载 VS code常用插件集

vue 【vetur】 vue语法高亮【vueHelper】vue2代码段 react 【react playground】react租金啊运行环境【react standard style code snippets】react standard风格代码块 HTML 【auto close tag】自动闭合HTML标签【aut...

2018-10-18 16:31:48 2629

转载 PureComponent的作用及一些使用陷阱

默认渲染行为的问题在React Component的生命周期中，有一个shouldComponentUpdate方法。这个方法默认返回值是true。这意味着就算没有改变组件的props或者state，也会导致组件的重绘。这就经常导致组件因为不相关数据的改变导致重绘，这极大的降低了React的渲染效率。比如下面的例子中，任何options的变化，甚至是其他数据的变化都可能导致所有cell的重...

2018-10-15 17:02:58 1397

转载 React性能优化 PureComponent 使用指南

为什么使用？转载https://wulv.site/2017-05-31/react-purecomponent.htmlReact15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易于实...

2018-10-15 16:38:41 372

原创移动端1像素边框问题

css@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.bord...

2018-09-12 14:18:54 293

转载前端大神博客收集大全

中文博客名称活跃度原创度维护者其他 W3Cplus ★★★★★ ★★★★★ 携程 @大漠国内最优秀的前端博客，原创居多前端观察 ★★★★☆ ★★★★☆ 腾讯 ISUX @神飞曾经最优秀，最近更新不频繁了腾讯web前端 AlloyTeam 团队 ★★★★ ★★★★ @腾讯Allo...

2018-09-07 17:38:43 3305 2

转载 ES6 Promise 和 Async/await的使用

你可能知道，Javascript语言的执行环境是"单线程"（single thread）。所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Jav...

2018-09-06 10:49:39 688

转载基于VUE的SPA单页应用开发－加载性能篇

1、基于异步数据的vue页面刷新先看看基于异步数据的vue页面刷新后，都发生了啥～如图所示：图1 基于异步数据的vue页面刷新网络请求图步骤如下：step1：请求页面； step2：请求页面内的css、js资源； step3：vue页面初始化； step4：页面渲染，框架呈现［无数据内容］； step5：请求页面实际数据； step6：数据ready，填充视图，图片...

2018-09-05 14:22:15 210

转载 vue路由传参及区别

1、用法A、query要用path来引入,接收参数都是this.$route.query.name。B、params要用name来引入，接收参数都是this.$route.params.name。2、效果A、query类似于ajax中get传参，即在浏览器地址栏中显示参数。B、params则类似于post，即在浏览器地址栏中不显示参数。query与params的区别1....

2018-09-05 10:38:10 687

原创 mint-ui Infinite scroll的使用说明+实例

<template><div class="myFeedBackPage"><HeaderBack :headerTitle="headertit" :txtColor="txtColor"/><ul class="feedBackList" v-infinite-scroll="loadMore"

2018-09-03 18:19:23 917

原创人脸检测，身份证扫描调三方接口获取图片base64路径转file，存入数据库（Vue）

<template><div class="PersonInfoAuthPage"><Header headerTitle="个人信息认证"/><p class="msg">识别内容必须清晰可见<i>*</i></p><div

2018-09-01 14:00:23 2394

原创 git常用指令

mine add git config remote.origin.url +地址 ssl和http的转换git push origin id 提交指定的commitgit cherry-pick 合并指定分支到另一个分git merge dev 把当前分支代码推送到dev分支两分支代码相同================================Git 常用命令=...

2018-08-20 11:19:04 131

转载 vue中axios的封装

第一步还是先下载axioscnpm install axios -S第二步建立一个htttp.jsimport axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦截器...

2018-08-20 11:12:01 342

转载 vue 列表实现单个点击显示隐藏

<div id="app"> <div v-for="item in items"> <toggle-list-item :item="item"></toggle-list-item> </div></div><template id=&quot

2018-08-15 15:48:32 5015

转载 gitlab基本的命令

1) 远程仓库相关命令检出仓库：$ git clone git://github.com/jquery/jquery.git查看远程仓库：$ git remote -v添加远程仓库：$ git remote add [name] [url]删除远程仓库：$ git remote rm [name]修改远程仓库：$ git remote set-url --push[name][...

2018-08-04 11:07:07 312

转载 Vuex状态管理模式的面试题及答案

1、vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Module1.1、state state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。1.2、getter getter有点类似vue.j...

2018-07-27 15:24:01 19900 1

转载 web前端常见面试题汇总

一、理论知识1.1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么a. 域名解析b. 发起TCP的3次握手c. 建立TCP连接后发起http请求d. 服务器端响应http请求，浏览器得到html代码e. 浏览器解析html代码，并请求html代码中的资源f. 浏览器对页面进行渲染呈现给用户参考《一次完整的HTTP事务是怎样一个过程》1.2、谈谈你对前端性...

2018-07-27 14:52:39 607

原创多页应用VS单页应用

多页应用：页面跳转 => 返回HTML优点：首屏时间快，seo效果好缺点：页面切换慢单页应用：页面跳转 => JS渲染优点：页面切换快缺点：首屏事件稍慢，seo效果差 ...

2018-07-21 14:24:27 356

转载 git本地项目代码上传至码云远程仓库总结

git基本使用小结之前公司的版本控制工具一直用的是svn，最近要改用git，之前用svn一直很熟，没用过git,顺应公司形势学习一下最基本的使用，避免正式切换后影响项目进度。下载、安装都很简单，网上有很多资源，选个最新版本下载一下，安装。安装成功后，会在开始菜单中出现这几个东西：如果你的本机是安装成功第一次使用，先配置一下一些基本的信息$ git config--gl...

2018-07-21 13:14:17 419

原创 vue中css的动画原理

2018-07-20 12:59:56 259

原创动态组件与v-once指令

<body> <div id="root">   <child-one v-if="type ===

2018-07-19 15:33:17 150

仿淘宝筛选完整功能

空空如也