react 中setState的更新策略
起因是想更新一个array类型的state，结果setState更新之后用console.log() debug 结果，发现结果特别玄学。。。
查了下发现this.setState是个异步操作。。。
前端
2018
前端To do list
20181014update: 可以不写了，开心
迫于生计，要从零开始学习前端。
由于之前的to do list 年代久远+ 前端的技术栈可之前几乎没有关系，因此新开一篇记录。
* css盒子模型 * 布局，flex * 前端debug的方法 * <del>javascript,</del>有空可以使用js刷leetcode练习语法 * <del>typescript</del> * jsx，以及jsx的typescript版tsx * 学习axios https://alligator.io/react/axios-react/ * 学习dva: https://github.com/sorrycc/blog/issues/62 * 学习umijs https://umijs.org/zh/guide/with-dva.html#
typescript学习笔记
·730 words·2 mins
先放参考资料：
TypeScript 入门教程
React & Webpack
react-typescript-cheatsheet （强推一波，讲了很多 react+ts 的实践）
typescript 是 javascript 的语法扩展，好处是提供了类型，可以在编译（结果为 js 文件）的时候提供静态的类型检查。
typescript的问号语法：标记某个参数为可选。
Redux 学习笔记
Redux是Flux架构的一种实现。
至于Flux架构是什么，可以参考Flux 架构入门教程
粗略地讲，和MVC架构是同一类东西，最大的区别是单向数据流，禁止了Model和VIEW层之间数据的流动。
JavaScript 学习笔记
·1060 words·3 mins
暂时没空从头开始搞…用到哪里先记录一下好了orz
我觉得不行，还是要先大致了解一下。
参考资料：
A re-introduction to JavaScript (JS tutorial)
继承与原型链
详细代码 1// 让我们假设我们有一个对象 o, 其有自己的属性 a 和 b： 2// {a: 1, b: 2} 3// o 的 [[Prototype]] 有属性 b 和 c： 4// {b: 3, c: 4} 5// 最后, o.[[Prototype]].[[Prototype]] 是 null. 6// 这就是原型链的末尾，即 null， 7// 根据定义，null 没有[[Prototype]]. 8// 综上，整个原型链如下: 9// {a:1, b:2} ---> {b:3, c:4} ---> null 10 11console.log(o.a); // 1 12// a是o的自身属性吗？是的，该属性的值为1 13 14console.log(o.b); // 2 15// b是o的自身属性吗？是的，该属性的值为2 16// 原型上也有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽 (property shadowing)" 17 18console.log(o.c); // 4 19// c是o的自身属性吗？不是，那看看原型上有没有 20// c是o.[[Prototype]]的属性吗？是的，该属性的值为4 21 22console.log(o.d); // undefined 23// d是o的自身属性吗？不是,那看看原型上有没有 24// d是o.[[Prototype]]的属性吗？不是，那看看它的原型上有没有 25// o.[[Prototype]].[[Prototype]] 为 null，停止搜索 26// 没有d属性，返回undefined 27 28 29 30 31 hasOwnProperty方法,用来检查对象是否有自己定义的属性，而不是从原型链上继承的属性。 32该方法不需要遍历原型链。 33function Graph() { 34 this.vertices = []; 35 this.edges = []; 36} 37 38Graph.prototype = { 39 addVertex: function(v){ 40 this.vertices.push(v); 41 } 42}; 43 44console.log(g.hasOwnProperty('vertices')); 45// true 46 47console.log(g.hasOwnProperty('nope')); 48// false 49 50console.log(g.hasOwnProperty('addVertex')); 51// false 52 53console.log(g.__proto__.hasOwnProperty('addVertex')); 54// true 55 56var g = new Graph(); 57// g是生成的对象,他的自身属性有'vertices'和'edges'. 58// 在g被实例化时,g.[[Prototype]]指向了Graph.prototype. 59 60 61 62 63 64const array1 = [1, 2, 3, 4]; 65const reducer = (accumulator, currentValue) => accumulator + currentValue; 66 67// 1 + 2 + 3 + 4 68console.log(array1.reduce(reducer)); 69// expected output: 10 70 71// 5 + 1 + 2 + 3 + 4 72console.log(array1.reduce(reducer, 5)); 73// expected output: 15 74 75 76 77 78const object1 = { 79 a: 1, 80 b: 2, 81 c: 3, 82 a: 4 83}; 84 85const object2 = Object.assign({a: 14, d: 5,h:12}, object1); 86 87console.log(object2.a, object2.d,object2.h); 88// expected output: 1 5 12 89// Properties in the target object will be overwritten by properties in the sources if they have the same key. 90//Later sources' properties will similarly overwrite earlier ones. 91 92 93 94 95 96function multiply(multiplier, ...theArgs) { 97 return theArgs.map(function (element) { 98 return multiplier * element; 99 }); 100} 101 102var arr = multiply(2, 1, 2, 3); 103console.log(arr); // [2, 4, 6] 104 105 106 107 108function parentFunc() { 109 var a = 1; 110 111 function nestedFunc() { 112 var b = 4; // parentFunc can't use this 113 return a + b; 114 } 115 return nestedFunc(); // 5 116} 117 118 119 120 121(参数1, 参数2, …, 参数N) => { 函数声明 } 122(参数1, 参数2, …, 参数N) => 表达式（单一） 123//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; } 124 125// 当只有一个参数时，圆括号是可选的： 126(单一参数) => {函数声明} 127单一参数 => {函数声明} 128 129// 没有参数的函数应该写成一对圆括号。 130() => {函数声明} 131 132var materials = [ 133 'Hydrogen', 134 'Helium', 135 'Lithium', 136 'Beryllium' 137]; 138 139materials.map(function(material) { 140 return material.length; 141}); // [8, 6, 7, 9] 142 143materials.map((material) => { 144 return material.length; 145}); // [8, 6, 7, 9] 146 147materials.map(material => material.length); // [8, 6, 7, 9] 148 149 150 151 152class ChildClass extends ParentClass { ... }