最近一直在业余时间学习和复习前端相关知识点，在一个公司呆久了，使用的技术不更新，未来真的没有什么前景，特别是我们这种以技术能力吃饭的人。所以至少要做到每段时间学习一些新东西（指以前自己不了解的知识），特别是在一个地方呆久了，习惯了现在的技术栈和工具，想要适应以后的发展就没那么容易了。
最近在看的知识点是react相关，现在工作用到的是es5原生模式的react组件开发，主要也只开发业务组件，对技术的门槛不高，纯属于适应需求即可。项目采取的是多页面开发，非单页，没有使用到react-router和redux。如果想跳槽没有这2个以及更多的插件的使用和开发经验，很难成功。所以也是必学的。
我们先来说一下es5的组件开发模式：
使用React.createClass创建组件，组件拥有状态和生命周期，this自动绑定了组件的实例。
（注：使用该方式需要相对比较低的react版本）
初始化state使用getInitialState。
this自动绑定当前组件实例。
es6方式创建组件：
初始化state使用构造函数constructor。
this需要手动绑定组件实例。或者使用箭头函数，或者使用bind(this)
普通无状态组件：
直接使用function，无状态和生命周期。适用于静态，可传props。
改变输入框内容：
展示：
输入框内容可改变。
代码：
使用onChange事件触发，获取最新的e.target.value的值改变state
setState传递方式不同，结果不同：
效果：
点击时，上一个只执行了最后一个，下一个2个都执行了。说明，使用函数的方式传入的state是最新的进行调用。
代码：