Fanz

在使用QQ企业邮箱中，设置了错误的收件规则，导致收件箱所有邮件移动到了自定义文件夹中。手动去移回这些邮件，没有找到响应的批量处理，一次只能移动一页，这样下来有170+页，是个麻烦事。

第一个想到的方法是查看API，发现每次移动调用的参数是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

&location=mail_list

&mailid=ZC0513-BHmnKHGM8D_6qBtDH4Lae7f
&mailid=ZL0513-ss~T6rNM2RbTpRZO~VGRf7f
... ...
&mailid=ZL0514-l~qc1YzCN_g_zX4mtbd3B7f

&mailaction=mail_move

&destfolderid=1

&t=mail_mgr2

&resp_charset=UTF8

&ef=js

&sid=-IELu_LevHO0lyR8,2

列表和键（key）

在React中转换数组和在JavaScript中几乎相同，可以通过数组的map方法渲染多个组件：

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

// 显示内容为1到5的列表
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

事件

React对事件的处理和在DOM元素上添加事件属性绑定事件的方式几乎一样，不同点在于React使用驼峰命名，而不是全小写；React中传递的是一个函数，不是一个字符串。
另一个区别是，不能使用return false来阻止事件默认行为。
HTML中：

这一年经历还算丰富，总结起来两件大事：毕业、工作。

毕业既令人期待，也让人伤感，大学生活也许不太充实，但是充满欢声。很佩服那些日子可以过得既能一直拼搏奋斗，又能充实有趣的人们。如果大学时光可以重来，我也不知道自己会选择怎样，也许选择那时候更努力的学习，希望可以改变现在的平庸；也许选择那时候更疯狂的玩耍，希望以此来珍惜那段无虑的时光；也许我能够在学习和玩耍之间能找到一个更好的平衡点；也许我根本就没认真地想过“如果重来”这个问题。

安装

React在codepen上提供了一个Hello，World项目事例，只需打开网站，即可尝试React。
另外还提供了一个html文件的Hello，World项目，项目中引用CDN的react.js、react-dom.js以及用于编译babel的babel.min.js，运行比较缓慢，只适合学习语法使用。

因为最近项目中用到了ajax，想尝试下Promise，所以看了下ES6中的Promise。

一般用法：

1
2
3
4
5
6
7
8

// promise表示一个Promise对象
promise
  .then(function (data) {
    // success
  })
  .catch(function (err) {
    // error
  })

相信学习React的都是有过一定了解的，React页面都是一个个组件构成的，所以写React也就是写一个个组件的过程。
目前，从写法上来说React组件主要有两种写法，一种是函数式(Functional)组件，一种是继承类(Class)组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Functional
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}
// ES6下更多情况会写成这样，其实就是一段返回一段jsx的函数
const Welcome = (props) => {
  return (
    <h1>Hello, {props.name}</h1>
  )
}
export default Welcome

// Class
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// ES6下一般为方便导入加入下面
export default Welcom

提高开发效率，我们发现前面用的最多的就是webpack --config ***，然后去刷新页面。解决此问题，可以使用react-hot-loader，这应该也是我们使用github的原因，在这里我们可以找到解决各种问题的办法。
查看其中使用方法（看不懂英文就用翻译一句一句看呗，其实我也是这么看过来的），会发现这一句These steps are covered by the walkthrough（这里应该是1版本的写法）。
根据这里的步骤，先是安装react-hot-loader，然后是server.js，提供有事例：

学习React几乎绕不开Webpack，就像使用Java需要搭建环境、规划目录结构、写各种配置文件一样，这里我们也要搭建这样的一个脚手架。当然，这里只是我的简单总结，并不是什么最佳实践，只是一步步去理解这个搭建过程。
目录结构开始只是简单的myapp/src，首先肯定是安装react、react-dom、webpack，webpack官网是安装在全局的。参见官网
这时候就可以开始写webpack配置文件，在编写之前，可以安装eslint来规范代码，这里的配置文件我是写在myapp/src/config/webpack.config.js，最基本的样子如下（可以在官网找到各配置项表示，这里使用的是node API形式）：

action: 规定动作以及数据
reducer: 如何更新action中的数据。接受旧的action、state,返回新的。(state)
store: 调用reducer更改action中的数据

定义action
action一般形式：
function addTodo(data) {
return {
type: type, // type属性是必须的
data: data // 其他属性，任意定义，保存数据
}
}