window.history属性指向 History 对象，它表示当前窗口的浏览历史。

属性

• History.length：当前窗口访问过的网址数量（包括当前网页）
• History.state：History 堆栈最上层的状态值（详见下文）
  阅读全文 »

• 常用的http请求头
  1. Accept
     • Accept:text/html 浏览器可接受服务器返回类型为text/html
     • Accept:/ 浏览器可以处理所有类型
  2. Accept-Encoding
  • content-type
    application/json、application/x-www-form-urlencode等
  • If-None-Match
  • If-Mofified-Since
    • 浏览器申明可以支持的编码方法，支持何种压缩方法(gzip、deflate)等，参见http压缩
  3. Connection
     • keep-alive 当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。
     • close 代表一个Request完成后，客户端和服务器之间用于传输HTTP数据的TCP连接会关闭， 当客户端再次发送Request，需要重新建立TCP连接。
  4. User-Agent
  5. Cookie
  6. Referer
  7. Host
  8. pragma(no-store)（http1.0)
  9. Range（用于断点续传）
     阅读全文 »

You can get access to the history object’s properties and the closest ‘s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

原理

• 通过高阶组件将普通React组件包装成Route
• Route是默认值（path是/且exact为false）意味着无论访问什么路径都会匹配
• render方法可以控制（如何）条件渲染组件

  1 2 3 4 5 6 7

  export default (Component) => { return function(props){ return <Route render={routeProps=>{ return <Component {...routeProps} />; }}></Route> } };

基本用法——很简单不在赘述

1
2
3
4

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

原型基础

• 可以通过Object.getPrototypeOf(xx)或xx.__proto__获取
• null、undefined是没有__proto__对象
• 函数类型除了有__proto__还有prototype属性
  • prototype默认有个constructor属性指向函数本身

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Person(){}
Person.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ // null
Person.prototype.__proto__.__proto__ // null 
Object.prototype.__proto__ //null
Person.prototype.constructor === Person // true

var o = {a: 1};
var a = ["yo", "whadup", "?"];
// o ---> Object.prototype ---> null
// a ---> Array.prototype ---> Object.prototype ---> null
// Person ---> Function.prototype ---> Object.prototype ---> null
Person.__proto__ === Function.prototype
Function.prototype // ƒ () { [native code] }

代码描述清晰、易懂

1
2
3
4
5

function instant(fn,...rest){
    var f = Object.create(fn.prototype);
    var val = fn.apply(f,rest);
    return isPrimitive(val) ? f : val;
}

基本数据类型

共有String、Number、Boolean、null/undefined、Object、Symbol(es6新增)6种类型

1
2
3
4
5
6
7
8

typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"  (1)
typeof null // "object"  (2)
typeof alert // "function"  (3)

总结了在React开发中常用的一些优化经验

React(基于15)中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合，特别是其高效的 diff 算法，让用户可以无需顾忌性能问题而”任性自由”的刷新页面，让开发者也可以无需关心 Virtual DOM 背后的运作原理，因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分，并只针对该部分进行实际 DOM 操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染。

最近在看react源码，虚拟dom对比中循环用的是for in遍历对象，一直被教育的是for in顺序是不能保证的等等，但是查阅资料后发现还是有一定规律的。