又到了周末，感觉这个周过得好漫长，因为我感觉离上次写文章已经好久了呢，不知道为啥最近这么忙，一天要写之前几天的东西，而且还要遭到技术以及产品甚至ui的白眼，还是不要抱怨了，因为这样生活才比较充实以至于不无聊，这个周我匆匆忙忙的整了几个demo，甚至有几个小demo能把我整到半夜，大家是不是好奇是什么难住了我，哈哈，那就不废话了直接上demo。
首先我们先来一个小的点击计数的例子，他的思想大概是这样的：
我们需要在界面上渲染一个点击按钮或是点击节点然后添加一个展示点击次数的节点，界面大概是这样：
现在我们就分析我们需要什么东西呢，展现在眼前的就有这么几个一个用来盛放计数的节点，另外需要一个点击的节点，再就是有一个事件那就是点击的事件，这应该是我们在开发过程之前的分析。那么我们就来用我们刚了解的react来进行书写。
接下来react.js中就是我的代码：
还是之前的套路，但是有所不同的是我这次没有用react的react.creatElement方法，而是换了ES6的新语法以及react的底层组件Component来进行创建，这跟之前的我们应该都接触过的类的创建是一样的，只是现在在ES6中用一个class跟extends就把原来的继承实现了。其中constructor是什么呢就是之前的继承中讲的那个父类以及子类指向的问题中提到的constructor，这里面会有一个super就是他的超类或是父类，这一块的知识我会在后来进行详细的讲解。接下来就是绑定点击事件，当然了这种用法有可能很少见，因为常用的方法大家都知道，但现在我写一个不常见的给大家了解一下，另外大家了解react是不是又看到了一种新的除了state方法以外的另一种动态传值地方法，大家可以试一试这种方法，接着往下走，接下来就是react中最重要的部分之一state（状态），也就是这里面的状态就是用来在界面上进行渲染或是会进行改变的数据放在这里面，现在我在里面放的就是我用来反映点击次数的值。
另外就是我们的点几事件，react我觉得还是原生的方法比较多，就像这个点击事件一样直接进行定义就行，通过对组件的数据流绑定进行事件处理，这里面有一个重要的方法就是this.setState,这个方法是对this.state里的值进行改变的唯一方法，在这里有一个注意事项就是this.state里面的值是不能改变的，以我的这个例子来说就是不能用自增来实现计数(count:this.state.count ++这样写是不行的）。再往后看就是组件中最终的返回值，用方法render将自己定义的组件返回出来以方便往界面进行渲染，在return中返回的只能是一个顶级元素进行嵌套不能有多个顶级元素一起返回，另外也不能不写也是错的，上面提到的常用的事件绑定应该是什么样的呢我也给大家展示一下，他大概是这样的：
这样的话我们就完成了我们的小demo然后我们就可以用React.render将我们的自定义组件进行渲染了，这个方法是对组建渲染的方法。然后我们用dos命令进行运行程序点击一下试试你的小demo吧。
由于文章长度原因我还有一个demo就先不写了，下次我会一块翻出来，我写的小demo一般都是看起来简单但是会反应react知识点或是我自己遇到的一些坑的东西比较有实际的意义，如果到后期我会用他来做一个实际的小项目来进行全部的汇总来检测我们的学习结果，希望大家能跟我一起入坑并且我带大家一起爬出去并且把坑填上。
最近我还在看一些关于webpack的知识我也会把它写成文章分享出去如果感兴趣的可以过来看看，希望能帮到大家。
