React复习小结（一）
一、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>
- 创建组件 首字母必须大写
React对象提供的createClass （｛
render函数－－主要创建组件的函数
返回的jsx语法 return（xml标签）--只能返回一个xml标签
｝） - 渲染 ReactDOM.render （组件名－－－<组件名/>，真实dom容器）
- React JSX中的注释很有意思，也很特别。{/*要注释的内容*/}
4. CSS样式写法 第一种方法：#id name属性直接可用 Class类名 需要使用className属性设置
第二种方法：行间样式 style={json 对象} --这也是FaceBook主张的样式设置
第三种方法：全局样式
第四种方法：原型样式 组件内部通过this调用原型设置的样式 var _this=this;
注：原型样式设置的位置－－－（组件创建－－组件渲染之间）
5.React中的事件机制 第一种：创建组件时设置 第二种：全局样式中设置 第三种：原型样式中设置函数
6.runder中也可以写入逻辑判断。
不足之处，望大神多多评论指教！
React复习小结（一）的更多相关文章
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- 设计模式复习小结一(Strategy Pattern/Observer Pattern/Decorator Patter/Factory Pattern)
目录: 前言 1. Stratrgy Pattern 2. Observer Pattern 3. Decorator Pattern 4. Factory Pattern 4.1 FactoryPa ...
- react复习总结（2）--react生命周期和组件通信
这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 入门小结
前段时间用 Ant Design 做了一个项目,由于之前没有 React 基础,对于 ES6 也是一知半解,所以也是一边开发一边学习,好不容易把项目完成了,现在终于有时间沉下心来从头开始好好学一下 R ...
- React使用小结
园子都荒废两个月了,实在是懒呀.. 近段时间用React开发了几个页面,在使用过程中着实碰到了一些问题,估计刚开始学习的伙伴们都会遇到各种各样的坑 总结记录一下,只看文档是碰不上问题的,内容基础也不基 ...
- React学习小结（二）
一.组件的嵌套 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- React学习小结（三）
一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...
- webpack+babel+react操作小结
最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记. 什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
随机推荐
- 前端代码组织优化--小demo（进阶你的思路）
事出必有因 最近在看老项目的代码,一个富客户端的js代码,几千行的代码,全是function(){} var...的垂直布局,真的是要感动的哭了. 一开始都是这样,想实现什么功能,不管三七二十一,fu ...
- http协议的八种请求类型
GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件).数据被包含在请求体中.POST请求可能会导致新的资源的创建和/或已有资源的修改. OPTIONS: ...
- 串口屏Modbus协议，串口屏的modbus协议资料，串口屏modbus通讯协议开发，串口屏之modbus协议使用技巧
串口屏Modbus协议,串口屏的modbus协议资料,串口屏modbus通讯协议开发,串口屏之modbus协议使用技巧 本例程中用51单片机作为Modbus从机,从机的设备地址为2,从机有4个寄存器, ...
- Java多线程学习笔记（二）——Executor,Executors,ExecutorService比较
Executor:是Java线程池的超级接口:提供一个execute(Runnable command)方法;我们一般用它的继承接口ExecutorService. Executors:是java.u ...
- angular双向数据绑定
<body ng-app> //三个view都会变 <input type="text" ng-model="name" value=&quo ...
- 安卓Native和H5页面进行交互
安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用 a)安卓写一个类,里面的方法需要用通 ...
- 浩哥解析MyBatis源码（十二）——binding绑定模块之MapperRegisty
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6758456.html 1.回顾 之前解析了解析模块parsing,其实所谓的解析模块就是为 ...
- 一、AspNet Core通过控制台编译程序的基本指令：
1.先创建文件夹 mkdir "文件夹"2.在对应的文件夹里边 用 dotnet new 命令创建了Program.cs和project.json俩个文件3.使用 dotnet r ...
- jquery通过ajax向后台发送（checkbox）数组，并在后台接收，（发送的数据是checkedbox）
版权声明:本文为博主原创文章,未经博主允许不得转载. $(document).ready(function(){ var flag = 1; $("#delBtn").click( ...
- linux 内核的futex - requeue 以及 requeue-pi
futex为更好支持pthread_cond的实现(,最主要是broadcast),设计了requeue功能,并以futex系统调用提供操作接口,包括一对配对的操作 futex_wait_requeu ...