一、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. 使用 Http 的 Get 方式读取网络数据

    作为移动平台的应用,一定避免不了与网络交换数据,不论是读取网页数据,还是调用API接口,都必须掌握Http通信技术 代码如下: package zw1; import java.io.Buffered ...

  2. 关于string类型定义占几个字节？？

    测试代码: #include <iostream>using namespace std;int main(void){ string name; cout<<"si ...

  3. [转载]前端构建工具gulpjs的使用介绍及技巧

    转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  4. Eclipse 中 Java 项目中 .settings 文件夹作用

    今天工作时,因对 .settings 文件夹误操作,耗时 6 个多小时,才了解到原因就出在 .settings 文件夹.经查阅资料,对 .settings 做如下整理: 就如setting这个名字,就 ...

  5. 海康/大华 IpCamera RTSP地址和格式

    海康:rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream说明:username: 用户名.例如 ...

  6. mongo数据库基础

    mongodb mongodb特性 分布式文件存储 介与关系数据库和非关系数据库之间 文件存储格式为BSON(一种JSON的扩展) BSON是对二进制格式的JSON的简称,BSON支持文档和数组的嵌套 ...

  7. Xamarin.Forms+Prism（3）—— 简单提示UI的使用

    这次给大家介绍两个比较好用的提示插件,如成功.等待.错误提示. 准备: 1.新建一个Prism Xamarin.Forms项目: 2.右击解决方案,添加NuGet包: 1)Acr.UserDialog ...

  8. CF #244 D. Match & Catch 后缀数组

    题目链接:http://codeforces.com/problemset/problem/427/D 大意是寻找两个字符串中最短的公共子串,要求子串在两个串中都是唯一的. 造一个S#T的串,做后缀数 ...

  9. 仿QQ空间和微信朋友圈，高解耦高复用高灵活

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  10. Linux基础（4）

    Linux基础(四) 通过前面的知识的学习,来现学现卖咯! 1.题目:集群搭建 1.1.部署nginx反向代理三个web服务,调度算法使用加权轮询: 1.2.所有web服务使用共享存储nfs,保证所有 ...