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

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

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

代码:

react复习总结(1)--react组件开发基础的更多相关文章

  1. vue.js原生组件化开发(一)——组件开发基础

    前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...

  2. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  3. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  4. React组件开发(一)初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  5. wn-cli 像React组件开发一样来开发微信小程序

    项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...

  6. react组件开发规范(一)

    这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...

  7. react组件开发规范总结

    开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉.现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...

  8. jquery插件模式开发和react组件开发之间的异同

    jquery插件模式开发和react组件开发之间的异同

  9. React 实践记录 01 组件开发入门

    Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...

随机推荐

  1. java串口通讯环境配置

    用java实现串口通信(windows系统下),配置如下: 1.comm.jar放置到 JAVA_HOME/jre/lib/ext;2.win32com.dll放置到 JAVA_HOME/bin;3. ...

  2. Java学习路径及练手项目合集

    Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 实验楼上的[Java 学习路径]中将首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE ...

  3. 最新版 INSPINIA IN+ - WebApp Admin Theme v2.7.1,包含asp.net MVC5示例代码,做管理系统最佳的选择。

    下载地址:http://download.csdn.net/download/wulang1988/10039402 最新版 INSPINIA IN+ - WebApp Admin Theme v2. ...

  4. 服务器非root安装gcc 4.8.5

    1.下载gcc-4.8.5: $ wget ftp://ftp.gnu.org/gnu/gcc/gcc-4.8.5/gcc-4.8.5.tar.gz 2.解压gcc: $ tar zxvf gcc-. ...

  5. cocos2d-x C++ iOS工程集成第三方支付宝支付功能

      一.在支付宝开放平台下载支付宝SDK(https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.WWgVz8&tr ...

  6. InstallShield :cannot rename directory ...

    InstallShield项目编译的生成目录文件夹需要关闭.

  7. JavaScript原型继承的实例

    // 创建构造函数实例(获取DOM节点) <div id="app">测试字符</div>

  8. ****************VS编码操作实践******************

    下面是今天主要练习的内容: 运用到的内容有 {运算符.强制转换.数据类型的运用.转义字符.变量与常量.基本类型的转换等} 1) 首先我们来看  下列的编码是由三大类组成的 ① 定制变量与常量  蓝色部 ...

  9. faces

    install Boost [boost_1_65_1-msvc-14.0-32.exe]BOOST_LIBRARYDIR=D:\_softwares_kits\boost_1_65_1\lib32- ...

  10. python3 TypeError: a bytes-like object is required, not 'str'

    在学习<Python web开发学习实录>时, 例11-1: # !/usr/bin/env python # coding=utf-8 import socket sock = sock ...