zoukankan      html  css  js  c++  java
  • react复习总结(1)--react组件开发基础

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

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

    最近在看的知识点是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

  • 相关阅读:
    UISlider无法拖动进度条的问题解决
    记一次UICollectionView中visibleCells的坑
    UITableViewController的子控件不随着滑动
    Pthon的定时任务APScheduler的启动与关闭
    Flask采用Virtualenv+Supervisor+Nginx部署应用
    Python安装Mysql驱动出错解决(最新出炉)
    【iOS9系列】- CoreSportlight内容索引的使用
    雷猴 2016
    【iOS系列】-使用CAGradientLayer设置渐变色
    公钥,私钥,SSL(讲的很生动) (转) 对称加密、非对称加密初探
  • 原文地址:https://www.cnblogs.com/wuhairui/p/10367620.html
Copyright © 2011-2022 走看看