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是最新的进行调用。
代码:
react复习总结(1)--react组件开发基础的更多相关文章
- vue.js原生组件化开发(一)——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
- React jQuery公用组件开发模式及实现
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React组件开发(一)初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- react组件开发规范(一)
这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...
- react组件开发规范总结
开发react也有一段时间了,一开始的随手写,生命周期乱用,无状态组件的不熟悉.现在逐渐规范一下,从网上各个地方copy过来,整理出一份文档.可能不全,后续还得多提炼总结和完善. 一.组件内方法书写, ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- React 实践记录 01 组件开发入门
Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...
随机推荐
- 在function module 中向数据库插入数据
http://www.sapjx.com/abap-function-module.html 1: 应该在function module 中向数据库插入数据
- nginx 长连接keeplive
发现后台日志打印太多 FD打开太多的日志. 处理思路: 修改nginx upstream的长连接 http://blog.csdn.net/gzh0222/article/details/852363 ...
- HTop依赖包
htop 是一个 Linux 下的交互式的进程浏览器,可以用来替换Linux下的top命令. 1.安装HTop时需要先安装依赖包:rpmforge-release-0.5.3-1.el6.rf.x86 ...
- 20165321 实验三 敏捷开发与XP实践
任务1: 要求: 参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECCODESTANDARD 安装alibaba 插件,解决代码中的规范问题. 在I ...
- cocos2d JS-(JavaScript) 类型检测与判断
//检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断对象类型的一个例 ...
- ElementNotVisibleException: Message: element not visible
selenium自动化测试中,经常会报异常: 可能会有各种疑问,元素可以定位到啊.为什么报以下异常? ElementNotVisibleException: Message: element not ...
- markdown入门杂记
系统环境:win10 软件:sublime Text 3 安装插件: markdown editing.markdownlivepreview 修改prference-markdownliveprev ...
- oracle数据库数值类型
---恢复内容开始--- 内容摘自网络 Oracle的数值类型有int,number,float,decimal,numberic等. NUMBER类型 定义 定义格式NUMBER (prec ...
- Rpgmakermv(7) Chronus.js说明与简要翻译
插件地址:https://github.com/triacontane/RPGMakerMV/blob/master/Chronus.js 日语版 ゲーム内で時刻と天候の概念を表現できるプラグインです ...
- Unity AssetBoundle 打包流程
1.准备打包资源,给要打包的资源添加一个AssetBoundle名字 2.在Scripts文件夹下新建一个子文件夹,命名为Editor(注意名字不能写错),新建一个打包资源的C#类,命名为BuildA ...