React复习小结(一)
一、React的发展
facebook在构建instagram网站的时候遇见两个问题:
1、数据绑定的时候,大量操作真实dom,性能成本太高
2、网站的数据流向太混乱,不好控制
于是facebook起初调研过市场上已存的mvc框架,发现都不太满意,于是就推陈出新,开发了react框架,并在2013年五月份开源。
二、React概述
和angularJS一样react核心解决的问题是数据绑定,开发者只要将数据绑定好,剩下的开发中只要关注业务就行了
1、组件化开发 使用react开发的时候,构建任何的页面都是组件component
2、jsx语法和虚拟dom基于jsx语法进行 创建组件,react用变量的形式自定义了一套dom模型
3、组件具有生命周期 每个组件都有生命周期,开发者可以基于生命周期对组件进行管理
4、单向数据流
需要在head引入Js文件。
<script src="react.min.js" type="text/javascript" charset="utf-8"></script>//react.min.js--把react的核心方法/事件机制封装其中
<script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script>//react-dom.min.js--把虚拟dom转换成真实dom的方法
<script src="browser.min.js" type="text/javascript" charset="utf-8"></script>//browser.min.js--把jsx语法/babel格式转成浏览器可识别的语法(本地文件不生效的时候,选择官网cdn引入)
三、React组件书写中需要注意的事项
<body>
<!--存放组件的容器-->
<div id="out"></div>
</body>
<script type="text/babel">
var sty1={
aa:{color:'#ccc',fontSize:'30px'},
bb:{color:'yellow'},
tap1:function(){
alert(111)
}
}
// 创建组件
var Demo=React.createClass({
tap:function(){
alert('事件机制')
},
render:function(){
var sty={color:'green',background:'pink'}
var _this=this;
var b=2;
var zz;
if(b>10){
zz={color:'red'}
}else{
zz={color:'blue'}
}
return(
<div>
<h1 id="h1" name="hhh">初次接触react组件</h1>
<h2 className="h2">hello world</h2>
<h2 style={sty}>行间样式设置</h2>
<p style={sty1.aa}>全局样式111</p>
<p style={sty1.bb}>全局样式222</p>
<p style={_this.sty2.cc}>原型样式111</p>
<p style={_this.sty2.dd}>原型样式222</p>
<button onClick={this.tap}>事件机制</button>
<button onClick={sty1.tap1}>事件机制全局</button>
<button onClick={_this.sty2.tap2}>事件机制原型</button>
<h1 style={zz}>render内写入逻辑</h1>
</div>
)
}
})
//原型样式写法
Demo.prototype.sty2={
cc:{'color':'firebrick'},
dd:{color:'gold'},
tap2:function(){
alert(2222)
}
}
//渲染
ReactDOM.render(<Demo/>,document.getElementById('out'));
</script>
- 创建组件 首字母必须大写
React对象提供的createClass ({
render函数--主要创建组件的函数
返回的jsx语法 return(xml标签)--只能返回一个xml标签
}) - 渲染 ReactDOM.render (组件名---<组件名/>,真实dom容器)
- React JSX中的注释很有意思,也很特别。{/*要注释的内容*/}
4. CSS样式写法 第一种方法:#id name属性直接可用 Class类名 需要使用className属性设置
第二种方法:行间样式 style={json 对象} --这也是FaceBook主张的样式设置
第三种方法:全局样式
第四种方法:原型样式 组件内部通过this调用原型设置的样式 var _this=this;
注:原型样式设置的位置---(组件创建--组件渲染之间)
5.React中的事件机制 第一种:创建组件时设置 第二种:全局样式中设置 第三种:原型样式中设置函数
6.runder中也可以写入逻辑判断。
不足之处,望大神多多评论指教!
React复习小结(一)的更多相关文章
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- 设计模式复习小结一(Strategy Pattern/Observer Pattern/Decorator Patter/Factory Pattern)
目录: 前言 1. Stratrgy Pattern 2. Observer Pattern 3. Decorator Pattern 4. Factory Pattern 4.1 FactoryPa ...
- react复习总结(2)--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- react复习总结(1)--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 入门小结
前段时间用 Ant Design 做了一个项目,由于之前没有 React 基础,对于 ES6 也是一知半解,所以也是一边开发一边学习,好不容易把项目完成了,现在终于有时间沉下心来从头开始好好学一下 R ...
- React使用小结
园子都荒废两个月了,实在是懒呀.. 近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑 总结记录一下,只看文档是碰不上问题的,内容基础也不基 ...
- React学习小结(二)
一.组件的嵌套 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- React学习小结(三)
一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...
- webpack+babel+react操作小结
最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记. 什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
随机推荐
- EF的DbSet属性的Where查询,注意事项
#1 Func<T,bool>与 Expression<Func<T,bool>>的区别 Func<T,bool>本身就是一个委托(delegate), ...
- pixi.js
添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...
- 关于使用mybatis的几点总结
mybatis的几点总结 1.关于resultType和resultMap的使用 查询结果集统一采用resultType,不要采用resultMap,因为resultMap需要写许多的表字段和实体类的 ...
- CentOS 7安装Docker
在虚拟机CentOS 7上安装Docker ## 零:检查前提条件: 在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多. ### 1.内 ...
- 阿里云CentOS7.2服务器的安装
第一步:下载服务器系统ISO安装文件 我使用的是阿里云的镜像:因为阿里云的服务在国内相对比较成熟 服务器镜像下载如下:http://mirrors.aliyun.com/centos/7/isos/x ...
- idea 查看tomcat源码
一.源码下载 SVN :http://svn.apache.org/repos/asf/tomcat/ GIT :https://github.com/apache 二.添加pom.xml文件 1. ...
- linux服务器性能(网卡流量、CPU、内存、磁盘使用率)监控
广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...
- 为程序猿正名,MM们,你们为什么要找一个程序猿男票?【原创】
前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...
- SVN提交后自动推送消息到钉钉群
钉钉设置机器人配置 1.进入配置机器人入口 2.添加机器人 3.测试WebHook请求 本人使用Postman进行测试 4.配置SVN 4.1 配置 Pre-commit hook 设置提交内容必须包 ...
- Codeforces 803F Coprime Subsequences (容斥)
Link:http://codeforces.com/contest/803/problem/F 题意:给n个数字,求有多少个GCD为1的子序列. 题解:容斥!比赛时能写出来真是炒鸡开森啊! num[ ...