一、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. React学习小结（二）

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

  3. React学习小结（三）

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

  4. React.js学习小结

    最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...

  5. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  6. flex学习小结

    接触到flex一个多月了,今天做一个学习小结.如果有知识错误或者意见不同的地方.欢迎交流指教. 画外音:先说一下,我是怎么接触到flex布局的.对于正在学习的童鞋们,我建议大家没事可以逛逛网站,看看人 ...

  7. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

  8. React学习笔记-1-什么是react，react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  9. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

随机推荐

  1. JDK停止工作

    问题:在服务器上运行程序,有时会出现JDK已停止工作,如图: 解决:在网上查找了很多资料,主要有以下几点 1.程序冲突,回想近期是否新安装了程序,将该程序进行关闭之后,再运行程序 2.异常未处理,即代 ...

  2. 物理CPU，物理核，逻辑CPU，虚拟CPU（vCPU）区别 （转）

    在做虚拟化时候,遇到划分CPU的问题,因此考虑到CPU不知道具体怎么划分,查询一些资料后就写成本文. a. 物理CPU:物理CPU是相对于虚拟CPU而言的概念,指实际存在的处理器,就是我们可以看的见, ...

  3. java中的成员变量和局部变量的区别

    成员变量: 在类体里面定义的变量叫做成员变量: 如果在变量有static关键字修饰,就叫作静态变量或类变量: 如果该变量没有static关键字修饰,就叫作非静态变量或实例变量: 局部变量: 方法内定义 ...

  4. spring property标签中的 ref属性和ref 标签有什么不同

    spring的配置文件可能会有多个<property name="a" ref="b" />就是找当前配置文件里的bean 也就是b <ref ...

  5. netty系列之:JVM中的Reference count原来netty中也有

    目录 简介 ByteBuf和ReferenceCounted ByteBuf的基本使用 ByteBuf的回收 ByteBuf的衍生方法 ChannelHandler中的引用计数 内存泄露 总结 简介 ...

  6. [LeetCode]1.Two Sum 两数之和（Java）

    原题地址:two-sum 题目描述: 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target  的那 两个 整数,并返回它们的数组下标. 你可以假设每 ...

  7. 面向对象—继承（Day19）

    初识继承 继承是一种创建新类的方式,在python中新类可以继承一个或多个父类,父类又可称为基类或超类,新建的类为派生类或子类.(类与类之间的关系是什么是什么的关系.) 继承语法: class Par ...

  8. 解决页面js、css代码样式失效

    解决方式 根据地址不同的层级深度,加上对应的 " . . / "(不推荐): 去掉所有的 " . . / ", 在js或css的路径前 加上 " / ...

  9. 攻防世界Web_python_template_injection

    题目: 就一句话啥也没有.python 模板注入.刚学菜鸡还不知道python模板有哪些注入漏洞,上网查一下.又学到一个知识点. python常用的web 模板有 Django,Jinja2,Torn ...

  10. Java泛型的那些事

    1.泛型概述 1.1.为什么使用泛型 没有泛型,在编写代码时只能使用具体类型或Object类型,无法做到使用者想要使用什么类型就是类型.比如:创建一个方法,形参需要指定需要使用的数据类型,在创建方法之 ...