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

  • 相关阅读:
    [转]tensorflow提示:No module named ''tensorflow.python.eager"
    mac使用pip3安装tensorflow(不用conda)
    不限速、没广告的迅雷(旧版迅雷)
    python从国内镜像安装第三方库
    Jupyter 安装并配置工作路径[转]
    VS2013只显示会附加到进程,无法启动调试
    电脑磁盘空间占用高于文件夹大小
    Latex基础
    C#/.Net 部分缩写
    texstudio设置外部浏览器及右侧预览不能使用问题
  • 原文地址:https://www.cnblogs.com/wuhairui/p/10367620.html
Copyright © 2011-2022 走看看