乞力马扎罗的雪2015-优快云博客

转载 webpack知识分享

webpack 4 webpack 四大核心概念：入口(entry) // 打包入口输出(output) : 打包后输出的位置配置 loader : loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块插件(plugins)...

2019-01-07 09:45:06 3560 4

转载 React Hooks

一个最简单的Hooks首先让我们看一下一个简单的有状态组件：class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div...

2018-11-21 20:28:46 232

转载 React知识

React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。render () { return ( <ul> {this.state.todoItems.map(({item, key}) => { return <li key={key}>{item}...

2018-11-21 19:19:06 234

转载 React 新context api

一：旧Context API// 传递者，生成数据并放入context中class DeliverComponent extends Component { getChildContext() { return { color: "purple" }; } render() { return <MidComponent />...

2018-11-01 10:42:33 220

转载 Virtual Dom原理浅析

React开发人员敦促你在编写组件时使用一种称为JSX的语法，混合了HTML和JavaScript。但浏览器对JSX及其语法毫无头绪，浏览器只能理解纯碎的JavaScript，所以JSX必须转换成JavaScript。这里是一个div的JSX代码，它有一个class name和一些内容：<div className='cn'> Content!</div...

2018-10-17 14:26:48 334

转载 BFC规范的理解

是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它.创建BFCfloat的值不是none position 的值不是static或者relative display的值是inline-block,table-cell,flex,table-caption或者inline-flex overflow的值不是v...

2018-08-24 16:31:47 1704

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-boxcontent-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高 border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置wi...

2018-08-24 16:26:51 780

转载浏览器本地存储

sessionStorage本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的web storage和cookie的区别Cookie的大小是受限的...

2018-08-24 16:25:13 197

转载 JS 引擎的执行机制

首先需明白两点：JS是单线程语言 JS的Event Loop是JS的执行机制。深入了解JS的执行，就等于深入了解JS里的event loop(1) JS为什么是单线程的？JS最初被设计用在浏览器中，那么想象一下，如果浏览器中的JS是多线程的。场景描述：那么现在有2个进程，process1 process2，由于是多进程的JS，所以他们对同一个dom，同时进行操作。 proces...

2018-08-22 22:48:54 124

转载 React 源码分析-调用ReactDOM.render后发生了什么

我们知道, 对于一般的React 应用, 浏览器会首先执行代码 ReactDOM.render来渲染顶层组件, 在这个过程中递归渲染嵌套的子组件, 最终所有组件被插入到DOM中. 我们来看看调用ReactDOM.render 发生了什么大致过程(只展示主要的函数调用):1、创建元素首先, 对于你写的jsx, Babel会把这种语法糖转义成这样:// jsxReactDO...

2018-08-16 16:44:49 4729

转载 ES6 小技巧

1. 强制要求参数ES6提供了默认参数值机制，允许你为参数设置默认值，防止在函数被调用时没有传入这些参数。在下面的例子中，我们写了一个 required()函数作为参数a和b的默认值。这意味着如果a或b其中有一个参数没有在调用时传值，会默认 required()函数，然后抛出错误。 const required = () => {thrownewError('Missing ...

2018-08-16 15:50:27 214

转载 JS一些实用窍门

1. 删除数组尾部元素const arr = [11, 22, 33, 44, 55, 66];arr.length = 3;console.log(arr); //=> [11, 22, 33]arr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined2.使用对象解...

2018-08-15 15:46:06 136

转载 Promise的使用

Promise本意“承诺”，是一个“承诺将来会执行”的对象基本用法是reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch ,resolve的东西，一定会进入then的第一个回调，肯定不会进入catch, 网络异常（比如断网），会直接进入catch而不会进入then的第二个回调let p = new Promise(function(re...

2018-08-14 20:29:17 281

转载 js基础知识(6)-深浅拷贝

let a = {age: 1}let b = aa.age = 2console.log(b.age) // 2从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题。浅拷贝首先可以通过 Object.assign 来解决这个问题。l...

2018-08-14 16:38:14 236

转载 js基础知识(5)-闭包

闭包的定义很简单：函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。function A() {let a = 1function B() {console.log(a)}return B}你是否会疑惑，为什么函数 A 已经弹出调用栈了，为什么函数 B 还能引用到函数A 中的变量。因为函数 A 中的变量这时候是存储在堆上的。现在的...

2018-08-14 15:33:38 194

转载 js基础知识(4)-执行上下文

当执行 JS 代码时，会产生三种执行上下文• 全局执行上下文• 函数执行上下文• eval 执行上下文当浏览器首次载入你的脚本，它将默认进入全局执行上下文。如果，你在你的全局代码中调用一个函数，你程序的时序将进入被调用的函数，并创建一个新的执行上下文，并将新创建的上下文压入执行栈的顶部。如果你调用当前函数内部的其他函数，相同的事情会在此上演。代码的执行流程进入内部函数，创建一个新...

2018-08-14 15:19:52 217

转载 React生命周期分析

在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用，并且也引入了新的 2 个 API 来解决问题。在之前的版本中，如果你拥有一个很复杂的复合组件，然后改动了最上层组件的state，那么调用栈可能会很长,调用栈过长，再加上中间进行了复杂的操作，就可能导致长时间阻塞主线程，带来不好的用户体验。Fiber 就是为了解决该问题而生。Fiber 本质上是一个虚拟的堆栈...

2018-08-09 20:06:06 186

转载 js基础知识（3）-this的指向

var obj = { foo: function () { console.log(this.bar) }, bar: 1};var foo = obj.foo;var bar = 2;obj.foo() // 1foo() // 2上述代码中，虽然obj.foo和foo指向同一个函数，但是执行结果却不一样，有这种差异的原因，就在于函数体内部使用了this关键字。t...

2018-08-07 19:29:32 244

转载 JS基础知识（2）-原型

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指向了 [[prototype]]，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使用 _proto_ 来访问。对象可以通过 __proto__ 来寻找不属于该对象...

2018-08-06 17:21:24 189

转载 JS基础知识（1）

内置类型js有七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。六种基本类型： null，undefined，boolean，number，string，symbol。JS 的数字类型是浮点类型的，没有整型。NaN 也属于 number 类型，并且 NaN 不等于自身。对象（Object）是引用类型，在使用过程中会遇到浅拷贝和深拷贝的问题。 let...

2018-08-06 12:53:54 164

转载 underscore

underscore提供了一套完善的函数式编程的接口，让我们更方便地在JavaScript中实现函数式编程。和jquery的全局变量$一样,underscore也提供了一个全局变量 _ ，方便我们调用其中的方法。Arraysunderscore为Arrays提供了很多工具类方法，可以方便快捷的操作数组：1.map_.map([1,2,3],(x)=>2*x);//[2,4,...

2018-08-04 13:48:27 937

原创 React.createClass 和 extends React.Component

常用extends React.Component ，以下是一些二者区别：1.初始化state时候的区别用createClass创建的组件需要使用函数getInitialState()函数如：import React from 'react';const Person= React.createClass({ getInitialState () { return ...

2018-08-01 16:09:40 2676

原创 mocker

mocker：模仿者，模拟第三方返回，前后端分离开发时，前端可以通过mocker来模仿后端数据的返回，以react+webpack项目为例：首先需要install webpack-api-mocker 然后在 webpack.config.js文件中引入，同时引入已经写好的mocker文件(稍后展示) ：const apiMocker = require('webpack-api-m...

2018-07-26 23:47:04 3648

原创 webpack

该文件解决了在css中引入图片运行时找不到图片的问题，pulicPath:将相对路径在打包运行的时候转换为pulicPath的值。 proxy: { '/DataStatistic':{ target:"请求服务的链接", changeOrigin: true, secu...

2018-07-26 23:27:09 97

原创 react-router

在React单页面应用中，UI组件的展示和切换需要由路由控制，每个路由对应不同的URL及路由信息。react-router v2和 v3版本在react-router v2和 v3版本中，路由需要在开始渲染前就定义好完整的结构，所有路由同事初始化才能生效，比如：<Router history={browserHistory}> <Route p...

2018-07-26 22:38:16 156

原创 github入门

昨天弄了好久，github终于可以使用，刚入门，不过还算顺利。首先是需要在github官网注册 https://github.com/下载github客户端：http://msysgit.github.io/ 安装后进入想作为本地仓库的文件夹，右键选择git init here 现在这个文件夹就是本地的仓库了例如：mytest。如果想将代码同步到远程仓库，需要创建SSH key

2015-08-13 09:15:42 280

cao_dan的博客