一、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. [Python Web]配置 nginx 遇到错误排查（初级）

    配置 nginx 遇到错误排查(初级) 系统版本:ubuntu 14.04,nginx 版本:nginx/1.4.6 (Ubuntu) 本文不是一步步搭建 nginx 的过程,而是我在使用 nginx ...

  2. oracle调用array参数存储过程

    declare -- Non-scalar parameters require additional processing files tyt_gas2014_search; ,); temp1 t ...

  3. stm32中断学习总结

    经过了两天,终于差不多能看懂32的中断了,由于是用的库函数操作的,所以有些内部知识并没有求甚解,只是理解知道是这样的.但对于要做简单开发的我来说这些已经够了. 我学习喜欢从一个例程来看,下面的程序是我 ...

  4. Javascript的内容

    JS简介和变量 {JS的三种方式}            1 HTML中内嵌JS(不提倡使用)            <button onclick="javascript:alert ...

  5. 用户登录（Material Design + Data-Binding + MVP架构模式）实现

    转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...

  6. 通过向日葵（或者TeamViewer）创建VPN

    1.向日葵软件的安装比较简单.主要要开启VPN服务. 2.向日葵管理界面,添加机器. 3.组网. 4.作为VPN服务端机器(内网机器)安装传入的连接 5.外网客户端机器 一.登录向日葵客户端 一般使用 ...

  7. 04(1) 基于上下文相关的GMM-HMM声学模型1

    1.上下文对音素发音的语谱轨迹的影响 受到上下文的影响,同一个音素的发音语谱轨迹不同 为提高识别准确率,对音素建模时应将这种上下文影响考虑在内 2.基于上下文相关的音素建模 注意,非单音素建模中,每个 ...

  8. css3---线性渐变

    .example1 { width: 150px; height: 80px; background: -moz-linear-gradient( top,#ccc,#000); background ...

  9. [工具技巧] SecureCRT使用技巧 V1.0

    本文档适用对象为需要使用secureCRT做系统或网络等调试的工程师,其必须有用过该款软件,基础功能会使用.对于那些需要修改大量设备的配置时像远程升级等等,更应该学习本文档. 1       Secu ...

  10. mui开发app之js将base64转图片文件

    之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后 ...