doclist 阅读(5) 评论(0)

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


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


最近在看的知识点是react相关,现在工作用到的是es5原生模式的react组件开发,主要也只开发业务组件,对技术的门槛不高,纯属于适应需求即可。项目采取的是多页面开发,非单页,没有使用到react-router和redux。如果想跳槽没有这2个以及更多的插件的使用和开发经验,很难成功。所以也是必学的。


我们先来说一下es5的组件开发模式:

使用React.createClass创建组件,组件拥有状态和生命周期,this自动绑定了组件的实例。

(注:使用该方式需要相对比较低的react版本)

初始化state使用getInitialState。

this自动绑定当前组件实例。

image.png


es6方式创建组件:

初始化state使用构造函数constructor。

this需要手动绑定组件实例。或者使用箭头函数,或者使用bind(this)

image.png


普通无状态组件:

直接使用function,无状态和生命周期。适用于静态,可传props。

image.png


改变输入框内容:

展示:

输入框内容可改变。

image.png

代码:

使用onChange事件触发,获取最新的e.target.value的值改变state

image.png


setState传递方式不同,结果不同:

效果:

点击时,上一个只执行了最后一个,下一个2个都执行了。说明,使用函数的方式传入的state是最新的进行调用。

1.gif

代码:

image.png