webpack知识分享

webpack 4  webpack 四大核心概念: 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader  : loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。...

2019-01-07 09:45:06

阅读数 126

评论数 0

React Hooks

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

2018-11-21 20:28:46

阅读数 19

评论数 0

React知识

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

2018-11-21 19:19:06

阅读数 26

评论数 0

React 新context api

一:旧Context API // 传递者,生成数据并放入context中 class DeliverComponent extends Component { getChildContext() { return { color: "purple...

2018-11-01 10:42:33

阅读数 23

评论数 0

Virtual Dom原理浅析

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

2018-10-17 14:26:48

阅读数 30

评论数 0

BFC规范的理解

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

2018-08-24 16:31:47

阅读数 125

评论数 0

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定,设置width/height属性指的是content部分的宽/...

2018-08-24 16:26:51

阅读数 66

评论数 0

浏览器本地存储

sessionStorage 本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储 localStorage 用于持久化的本地存储,除非主动删除数据...

2018-08-24 16:25:13

阅读数 44

评论数 0

JS 引擎的执行机制

首先需明白两点: JS是单线程语言 JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop (1) JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。 场景描述: 那么现在有2个进程,pro...

2018-08-22 22:48:54

阅读数 22

评论数 0

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

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

2018-08-16 16:44:49

阅读数 336

评论数 0

ES6 小技巧

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

2018-08-16 15:50:27

阅读数 37

评论数 0

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); ...

2018-08-15 15:46:06

阅读数 27

评论数 0

Promise的使用

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

2018-08-14 20:29:17

阅读数 34

评论数 0

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

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

2018-08-14 16:38:14

阅读数 60

评论数 0

js基础知识(5)-闭包

闭包的定义很简单:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数 B 就被称为闭包。 function A() { let a = 1 function B() { console.log(a) } return B } 你是否会疑惑,为什么函数 A 已经弹出调...

2018-08-14 15:33:38

阅读数 28

评论数 0

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

  当执行 JS 代码时,会产生三种执行上下文 • 全局执行上下文 • 函数执行上下文 • eval 执行上下文 当浏览器首次载入你的脚本,它将默认进入全局执行上下文。如果,你在你的全局代码中调用一个函数,你程序的时序将进入被调用的函数,并创建一个新的执行上下文,并将新创建的上下文压入执行栈的...

2018-08-14 15:19:52

阅读数 34

评论数 0

React生命周期分析

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

2018-08-09 20:06:06

阅读数 39

评论数 0

js基础知识(3)-this的指向

var obj = { foo: function () { console.log(this.bar) }, bar: 1 }; var foo = obj.foo; var bar = 2; obj.foo() // 1 foo() // 2 上述代码中,虽然obj.foo和...

2018-08-07 19:29:32

阅读数 35

评论数 0

JS基础知识(2)-原型

每个函数都有 prototype 属性,除了 Function.prototype.bind(),该属性指向 原型。  每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型。其实这个 属性指向了 [[prototype]],但是 [[prototype]] 是内部属性,我们并...

2018-08-06 17:21:24

阅读数 24

评论数 0

JS基础知识(1)

内置类型 js有七种内置类型,七种内置类型又分为两大类型:基本类型和对象(Object)。  六种基本类型: null,undefined,boolean,number,string,symbol。 JS 的数字类型是浮点类型的,没有整型。NaN 也属于 number 类型,并且 NaN 不...

2018-08-06 12:53:54

阅读数 27

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭