一、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. java小题：福尔摩斯的约会

    原题地址:https://www.nowcoder.com/pat/6/problem/4040 防止广告嫌疑,原题为: 题目描述 大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485 ...

  2. c#遍历文件夹获得所有文件

    在c#中,想要获得一个文件夹下的所有子目录以及文件十分简单. 首先,获取目录的情况下,DirectoryInfo.GetDirectories():获取目录(不包含子目录)的子目录,返回类型为Dire ...

  3. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  4. js中计算两个日期之差

    js中计算两个日期之差            var aBgnDate, aEndDate;            var oBgnDate, oEndDate;            var nYl ...

  5. ASP.NET CORE部署到Linux

    ASP.NET CORE部署到CentOS中 在Linux上安装.NET Core 参考:https://www.microsoft.com/net/core#linuxcentos 配置Nginx ...

  6. ENetwork Basic Configuration PT Practice SBA

    CCNA Exploration: 网络基础知识 (版本 4.0) A few things to keep in mind while completing this activity: 1 Do  ...

  7. php流程管理

    流程控制即某个人发起一个流程,通过一层一层审核,通过后,完成整个流程,若有一层审核未通过,中断整个流程.即结束! 比如请假流程: 某一员工发起一个请假流程,那么这个流程的节点人员即他的上级,上上级,上 ...

  8. HDU 5617 DP

    沿着一条条斜线DP即可,dp[k][i][j]表示第k步,一端在第j列,另一端在第i列,构成回文的个数,沿着四个方向推下去即可. #include <iostream> #include ...

  9. Git操作指南

    请访问以下网址,很详细,今天偷个懒记录一下,之后有时间再来补全吧! https://git-scm.com/book/zh/v2

  10. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...