一、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>
  1. 创建组件  首字母必须大写

    React对象提供的createClass ({
    render函数--主要创建组件的函数
    返回的jsx语法 return(xml标签)--只能返回一个xml标签
    })

  2. 渲染     ReactDOM.render  (组件名---<组件名/>,真实dom容器)
  3. React JSX中的注释很有意思,也很特别。{/*要注释的内容*/}

4. CSS样式写法  第一种方法:#id  name属性直接可用  Class类名  需要使用className属性设置

第二种方法:行间样式 style={json 对象} --这也是FaceBook主张的样式设置

第三种方法:全局样式

第四种方法:原型样式    组件内部通过this调用原型设置的样式      var _this=this;

注:原型样式设置的位置---(组件创建--组件渲染之间)

5.React中的事件机制  第一种:创建组件时设置  第二种:全局样式中设置  第三种:原型样式中设置函数

6.runder中也可以写入逻辑判断。

不足之处,望大神多多评论指教!

React复习小结(一)的更多相关文章

  1. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  2. 设计模式复习小结一(Strategy Pattern/Observer Pattern/Decorator Patter/Factory Pattern)

    目录: 前言 1. Stratrgy Pattern 2. Observer Pattern 3. Decorator Pattern 4. Factory Pattern 4.1 FactoryPa ...

  3. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  4. react复习总结(1)--react组件开发基础

    这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...

  5. React 入门小结

    前段时间用 Ant Design 做了一个项目,由于之前没有 React 基础,对于 ES6 也是一知半解,所以也是一边开发一边学习,好不容易把项目完成了,现在终于有时间沉下心来从头开始好好学一下 R ...

  6. React使用小结

    园子都荒废两个月了,实在是懒呀.. 近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑 总结记录一下,只看文档是碰不上问题的,内容基础也不基 ...

  7. React学习小结(二)

    一.组件的嵌套 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. React学习小结(三)

    一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...

  9. webpack+babel+react操作小结

    最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记. 什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...

随机推荐

  1. EF的DbSet属性的Where查询,注意事项

    #1 Func<T,bool>与 Expression<Func<T,bool>>的区别 Func<T,bool>本身就是一个委托(delegate), ...

  2. pixi.js

    添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...

  3. 关于使用mybatis的几点总结

    mybatis的几点总结 1.关于resultType和resultMap的使用 查询结果集统一采用resultType,不要采用resultMap,因为resultMap需要写许多的表字段和实体类的 ...

  4. CentOS 7安装Docker

    在虚拟机CentOS 7上安装Docker   ## 零:检查前提条件:   在Red Hat 和Red Hat系列的Linux发行版中,安装Docker所需的前提提交并不多.     ### 1.内 ...

  5. 阿里云CentOS7.2服务器的安装

    第一步:下载服务器系统ISO安装文件 我使用的是阿里云的镜像:因为阿里云的服务在国内相对比较成熟 服务器镜像下载如下:http://mirrors.aliyun.com/centos/7/isos/x ...

  6. idea 查看tomcat源码

    一.源码下载 SVN :http://svn.apache.org/repos/asf/tomcat/ GIT :https://github.com/apache 二.添加pom.xml文件 1. ...

  7. linux服务器性能(网卡流量、CPU、内存、磁盘使用率)监控

    广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...

  8. 为程序猿正名,MM们,你们为什么要找一个程序猿男票?【原创】

    前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...

  9. SVN提交后自动推送消息到钉钉群

    钉钉设置机器人配置 1.进入配置机器人入口 2.添加机器人 3.测试WebHook请求 本人使用Postman进行测试 4.配置SVN 4.1 配置 Pre-commit hook 设置提交内容必须包 ...

  10. Codeforces 803F Coprime Subsequences (容斥)

    Link:http://codeforces.com/contest/803/problem/F 题意:给n个数字,求有多少个GCD为1的子序列. 题解:容斥!比赛时能写出来真是炒鸡开森啊! num[ ...