qq_38187583的博客

为什么输入URL就可以显示想要的页面？浏览器偷偷做了些什么？前端可以针对这些做哪些优化?最近，在准备面试，这个问题我是被面试官问怕了，浏览器到底做了什么？你去问浏览器呗(尴尬）。想一下还是系统学习总结一下吧，话不多说看张图！可以看出来，从输入URL到浏览器显示完成可以大概分为5个阶段：DNS解析 TCP阶段 HTTP阶段 解析 / 渲染阶段 布局layout / 渲染页面...

css<style>* { margin: 0; padding: 0;}.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;}table tr.even{ ...

redux-thunk 是一个比较流行的 redux 异步 action 中间件，比如 action 中有 ****setTimeout**** 或者通过 ****fetch****通用远程 API 这些场景，那么就应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响...

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子：let a=[0,1,2,3,4], b=a;console.log(a===b);...

在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信下面依次说下这几种通信方式。父组件向子组件通信这是最简单也是最常用的一种通信方式：父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理。下面是演示代码：父组件 App.js：...

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componen...

<ul id="Scroll"> <li>1.多发发沙发沙发发防辐射服</li> <li>2.框架来军军军军绿军绿军绿军</li> <li>3・一一飞洒发拉设计费垃圾粉拉数据弗利萨就发设计费</li> <li>4・吃吧吧是阿凡达沙发沙发上发大

关于react-redux的一个流程图流程图connect用法介绍connect方法声明：connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])作用：连接React组件与 Redux store。参数说明：mapStateToProps(state, ownProps) ...

一 delay操作符源Observable延迟指定时间，再开始发射值。import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { delay } from 'rxjs/operators/delay';@Component({  sele...

一 map操作符类似于大家所熟知的 Array.prototype.map 方法，此操作符将投射函数应用于每个值 并且在输出 Observable 中发出投射后的结果。import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs/Observable';import { of }...

一 take操作符只发出源 Observable 最初发出的的N个值 (N = count)。 如果源发出值的数量小于 count 的话，那么它的所有值都将发出。然后它便完成，无论源 Observable 是否完成。import { Component, OnInit } from '@angular/core';import { range } from 'rxjs/observab...

一 merge操作符把多个 Observables 的值混合到一个 Observable 中import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { range } from 'rxjs/observable/range';import {...

一 of操作符import { Component, OnInit } from '@angular/core';import { of } from 'rxjs/observable/of';import { Observable } from 'rxjs/Observable';@Component({selector: 'app-create',templateUrl...

初始化安装 dva-cli 用于初始化项目：npm install -g dva-cli# 或yarn global add dva-cli创建项目目录，并进入该目录：mkdir your-projectcd your-project初始化项目：dva init然后运行 npm start 或 yarn start 即可运行项目。目录结构项目初...

前言技术资料react + dva + redux + react-router + redux-sage + antd + antd动画总的来说dva是一个很简单的项目 一步步跟大家来说一下把效果图 初始化环境配置因为项目中使用了antd的关系 所以 这边需要做一下设置 才可以正常使用文件名称是:.roadhogrc目录结构 初始化dva...

/**** 界面自适应屏幕宽度代码**/sizeAdaptation();$(window).resize(function(){sizeAdaptation();});/*** 需要在html上增加 class = page-content-adapt-ui 特殊属性*/function sizeAdaptation(){//特殊页面 不执行var except =[...

快速修复对于写了半年多的项目，模块已经很多了，所以不可能在升级到angular6后马上更新所有代码关于RXJS6的新特性，所以官方给出了一个可以暂时延缓我们不需要修改rsjx代码的办法npm install --save rxjs-compat优点： 暂时不用改代码，可以一点点地改，直到改完后吧这个包卸掉缺点： 对于rxjs6的rename的operator无效，所以，如果有用到r...

一、let和const 在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。let和const都能够声明块级作用域，用法和...

按照生命周期执行的先后顺序，Angular生命周期接口如下所示 名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。 OnChanges 指令和组件 ...

一、Angular5 UI 库 Ant Desigin 介绍Ant Design 是我们(蚂蚁金服 Ant Design 团队)开发的一款优秀的前端框 UI 库架支持 React和 Angular5。Ant Design 很久以前只支持 React，但是 Facebook React 开源协议修改后, 阿里巴巴 Ant Design团队开始了 Angular5 的支持。据了解，...