一、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. 《PHP程序员面试笔试宝典》——如何处理与面试官持不同观点这个问题？

    如何巧妙地回答面试官的问题? 本文摘自<PHP程序员面试笔试宝典> 在面试的过程中,求职者所持有的观点不可能与面试官一模一样,在对某个问题的看法上,很有可能两个人相去甚远.当与面试官持不同 ...

  2. 【ybtoj】贪心算法例题

    [基础算法]第二章 贪心算法 例一 奶牛晒衣服 题目描述 有n件衣服,第i件衣服的湿度为h. 在自然条件下,每件衣服每分钟都可以自然晒干A点湿度. 在烘干机作用下,可以选择一件衣服,用一分钟的时间晒干 ...

  3. Azure AD（六）添加自定义域名

    一,引言 每当我们在 Azure Portal 上创建新的租户时,都会在设置租户的 "初始域名" 后加上 ".onmicrosoft.com",默认情况下 &q ...

  4. Dubbo源码剖析五之服务本地缓存

    Dubbo调用者需要通过注册中心(例如:ZK)注册信息,获取提供者.但是如果频繁从ZK获取信息肯定会存在单点故障问题,所以Dubbo提供了将提供者信息缓存在本地的方法. Dubbo在订阅注册中心的回调 ...

  5. Redis入门与实践(附项目真实案例代码)

    我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为优质八股文选手 今天继续更新austin项目,如果还没看过该系列的同学可以点开我的历史文章回顾下,在看的过程中不要忘记了点赞哟!建议 ...

  6. JAVA8学习——深入浅出方法引用(学习过程)

    方法引用:method reference 先简单的看一下哪里用到了方法引用: public class MethodReferenceTest { public static void main(S ...

  7. python进阶（25）协程

    协程的定义 协程(Coroutine),又称微线程,纤程.(协程是一种用户态的轻量级线程) 作用:在执行 A 函数的时候,可以随时中断,去执行 B 函数,然后中断B函数,继续执行 A 函数 (可以自动 ...

  8. 图解python | 循环与控制

    作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/56 本文地址:http://www.showmeai.tech/article-det ...

  9. 树莓派GPIO开发(三)：蜂鸣器-PWM调节

    配置环境 系统:Raspbian11(官方64位) 设备:树莓派CM4 一.写在前面 关于PWM的基本介绍在上一篇博客已经说过了:树莓派GPIO开发(二)RGB模块-PWM调节 在RGB模块中,我们主 ...

  10. 北大博士生提出CAE，下游任务泛化能力优于何恺明MAE

    大家好,我是对白. 何恺明时隔两年发一作论文,提出了一种视觉自监督学习新范式-- 用掩蔽自编码器MAE,为视觉大模型开路. 这一次,北大博士生提出一个新方法CAE,在其下游任务中展现的泛化能力超过了M ...