起因：应项目需求，需要用某个工具截图然后粘贴上传到后台的功能！于是着手搜查资料，最终的结果就是找到了这个对象clipboardData，然后开始着手！

谷歌chrome浏览器测试(clipboardData)

相信这个也是很多开发者都在用的浏览器，当然也是尝试的开始。整个过程是这样的
1）使用微信截图
2）'⌘+v, ctrl+v'在这个页面的随意位置粘贴
3）执行上传图片到后台的流程(产生loading状态)

一、认识

Vue是目前比较流行了前端框架，git上的start数也是非常的多的（57.4K），接近react的start数了，可以说目前的趋势：前端两大框架“react”和“vue”，自身公司一直是在用react，所以对react有一定的了解，组件化、单项数据流、虚拟Dom等是react的特点，简单的来说一下本公司react的大概架构：webpack+react+redux+redux-form,UI框架用的是antd-design这一套，可以说中等以下的项目这些都能实现的了。那为什么要学习Vue，其实也是出于兴趣，并且公司目前的任务不多，所以就在各种关于前端信息的网站上看到了Vue（ps：其实早就听说过），也看过很多关于对比的文章，这里就不多阐述了，有兴趣的同学可以百度，相信你一定会找到答案的。我想说的就是从react的角度去理解Vue。

仔细阅读过官网后，做了些小的例子，能看出Vue其实也挺好用的，react有的Vue也有，虚拟dom，虽然说是后加的，但是原理都是相通的，尽可能的去减少dom的操作，而且也不用我们开发者去操心有关dom性能的问题，这些react和Vue都帮助我们操心了，开发者只需要关注业务实现的逻辑。此外生命周期，一开始我以为是react独有的，没想到看到官网的后期，Vue也存在。可能是借鉴的吧！在这里就不多喷了…

1）下面是有关二者的生命周期：

Vue的生命周期官网分的比较细致,共有10个,react有7个,你可以根据项目的应用选择需要的生命周期去做相关的操作。

原由：写这篇文章主要是为了增强自己的记忆，同时也是为了分享一下我们常用的创建组建的方法，主要是四种(createClass, component, PureComponet,Stateless Functional Component)，启发来自于不知的博客呀，有兴趣的人可以去看看他的博客！

叙述： 我们在用react的时候考虑最多的其实就是如何策划组建的划分，组建的嵌套，能够做到更省时、省力。做过了一个react的项目，目前依旧在继续，一上来我们就使用了es6的语法堂，用component来，仔细看过官方文档后，发现不用es6语法的同时只能使用createClass。在写组建的同时我们也都会说到这两个词语，状态组建和pure组建（纯函数）。今天就来大概介绍一下各自的特点：

一、createClass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var React = require("react");
var FirstComponent = React.createClass({
  propTypes: {
    name: React.PropTypes.string 
    //属性校验 (string, number, bool, func, array, object...... )
  },
  
  getDefaultProps: function() {
    return {
      name: 'Mary' 
    };
    // 初始化props
  }, 
    
  getInitialState: function() {
    return {count: this.props.initialCount}; 
    //初始化props
  },
  
  handleClick: function() {
    //.....
  },
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});
module.exports = FirstComponent;