react小知识2

概述

这是我学习react的过程中，学到的一些简便写法，都是利用了es6的特性，记录下来供以后开发时参考，相信对其他人也有用。

参考资料：dva.js 知识导图

析构

我们也可以析构传入的函数参数。

const add = (state, { payload }) => {
  return state.concat(payload);
};

还可以代替apply。（在es6之前，我们一般都是用apply来把数组类型的参数引用给函数的。）

function foo(x, y, z) {}
const args = [1,2,3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

对象字面量的改进，这是析构的反向操作，用于组装一个object。

const name = 'duoduo';
const age = 8;

const user = { name, age };  // { name: 'duoduo', age: 8 }

还可以收集函数参数为数组：

function directions(first, ...rest) {
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

spread attributes

这是jsx从es6借鉴过来的很有用的特性，用于扩充组件的props。

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
<a {...attrs}>Hello</a>

//等同于

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
<a href={attrs.href} target={attrs.target}>Hello</a>

定义promise

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log('executed');
});

函数组件

React组件有 3 种定义方式：React.createClass，class和Stateless Functional Component，其中Stateless Functional Component是函数，不是 Object，没有 this 作用域，是 pure function。

注释

尽量别用 // 做单行注释。

<h1>
  {/* multiline comment */}
  {/*
    multi
    line
    comment
    */}
  {
    // single line
  }
  Hello
</h1>