这是构造函数，就是new xxx()调用的那个函数，这里为啥要super？ 这是个奇怪的写法，原因是因为构造函数中访问不到this，需要调用super()才能顺利访问到this，这里个人尤为不解，虽然理解起来也不难，构造函数属于static方法，这里为啥不能和java一样的逻辑，构造函数只能访问类？

　　　this.propTypes  

　　　这个属性标明了组件中所有用到的props 并且能验证传入的值的正确性，感觉组件有它非常有必要，建议写props不要少了这个属性。

　react 中this的坑

　　在hello.jsx组件上添加一个click事件，在事件中打印this：

class Hello extends React.Component{ constructor(props){ super(props); this.propTypes = { text:React.PropTypes.string } } render(){ onClick={this.print}> hello <span>{this.props.text}</span> </div> } print(){ console.log(); console.log(this); } }

　　　会发现this的值既不是点击dom也不是class而是null:

　　可是如果在静态文件中写React.createClass则不会出现null。

　　我的解决办法是在render中强制指定this为class：　

render(){ this.print = this.print.bind(this);//绑定this到函数 onClick={this.print}> hello <span>{this.props.text}</span> </div> }

查看官方文档解释是：

　　React.createClass有一个内置的魔术功能，可以自动绑定所有方法this。这对于在其他类中不用于此功能的JavaScript开发人员来说可能会有点混乱，或者当从React转到其他类时可能会令人困惑。因此，我们决定不将此内置到React的类模型中。如果需要，您仍然可以在构造函数中明确地预处理方法。

在遇到点击更改state时，一定会用到this。要注意this的指向问题

总结

　　前端就像是一只正当壮年的母鸡，今天下个蛋，明天下个蛋，是寡蛋是好蛋不知道，今天的蛋和明天的蛋尝起来味道也差不多。我们就像是饲养员，负责给母鸡送吃的，下了蛋就要马上负责收，否则要么就烂了、要么就孵出小鸡吃不了鸡蛋了。

　　那些层出不穷的框架，坏掉的框架、已经变的强大就很难驾驭的框架，这对前端来说是一个考验。

相关资源

　　下载我最终做好的demo

　　webpack2中文文档

转载请注明出处（完）