react复习总结（1）--react组件开发基础

 

这次是年后第一次发文章，也有很长一段时间没有写文章了。准备继续写。总结是必须的。

 

最近一直在业余时间学习和复习前端相关知识点，在一个公司呆久了，使用的技术不更新，未来真的没有什么前景，特别是我们这种以技术能力吃饭的人。所以至少要做到每段时间学习一些新东西（指以前自己不了解的知识），特别是在一个地方呆久了，习惯了现在的技术栈和工具，想要适应以后的发展就没那么容易了。

 

最近在看的知识点是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是最新的进行调用。

代码：