Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Event
@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

 <Input handleChange={this.handleChange} {...this.props} />;

const {} = {...rest};

@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

Spread_operator

only useful for Function (x, y, ...rest) => {} & Array [x, y, ...rest]

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

扩展语法允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展。

let [a, b, ...c] = [1, 2, 3, 4];


let n = [a, b, ...c];


// 在需要使用`数组`作为函数的`参数`的情况下,通常使用v Function.prototype.apply `方法:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// 如果使用了ES6的展开运算符,你可以这么写:

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

Object ???

ES7/8

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

Destructuring_assignment

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解构赋值 语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。

let a, b, rest;

/* array 解构赋值 */
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

/* object 解构赋值 */
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2

// ES7 - 试验性 (尚未标准化)
// Uncaught SyntaxError: Unexpected token ...
({a, b, ...rest} = {a:1, b:2, c:3, d:4});
@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

let { x, y } = { x: 1, y: 2, a: 3, b: 4 };


```
@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

https://repl.it/examples

function Person(name, job) {
  this.name = name;
  this.job = job;
  this.print = function() {
    console.log(this.name + ', ' + this.job);
  };
}
var thatGuy = new Person("Jack", "coder");
thatGuy.print();
@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

@xyzdata

This comment has been minimized.

@xyzdata

This comment has been minimized.

Copy link
Owner Author

@xyzdata xyzdata commented Jun 21, 2017

css

https://stackoverflow.com/questions/4264527/vertical-text-direction

https://www.thecssninja.com/css/real-text-rotation-with-css

image

<p class="vericaltext">
Hi This is Vertical Text!
</p>



.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}
@xgqfrms-GitHub

This comment has been minimized.

Copy link

@xgqfrms-GitHub xgqfrms-GitHub commented Jun 30, 2017

Stateless function components & no refs

React & event.preventDefault() & event.stopPropagation();

https://gist.github.com/xgqfrms-GitHub/cc2598e0410542c504aa7fee4e2c8b9f#gistcomment-2136883

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment