一、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. jmeter 使用jmeter 录制 手机APP脚本

    1.打开jmeter.鼠标右击工作台.添加HTTP代理服务器 2.设置配置jmeter.手机无线网络.(目标控制器也可以选择加到线程组中) 3.添加查看结果树 4.启动完成后.操作手机.jmeter就 ...

  2. POJ 2585 Window Pains 题解

    链接:http://poj.org/problem?id=2585 题意: 某个人有一个屏幕大小为4*4的电脑,他很喜欢打开窗口,他肯定打开9个窗口,每个窗口大小2*2.并且每个窗口肯定在固定的位置上 ...

  3. css 实现旋转八卦图

    虽然这不算什么亮点,不过也可以供路上的小伙伴学习下 直接上干货: <!doctype html> <html lang="en"> <head> ...

  4. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  5. EasyMvc--让MVC区域开发更Easy(提供源码下载)

    核心: 主要利用MVC的区域功能,实现项目模块独立开发和调试. 目标: 各个模块以独立MVC应用程序存在,即模块可独立开发和调试. 动态注册各个模块路由. 一:新建解决方案目录结构 如图: 二:Eas ...

  6. Ranking Relevance小结

    Ranking Relevance是搜索排序算法的各个影响因子中相当重要的一个部分.对于Ranking Relevance的计算,过去的技术往往分为两个大的方向:Click Behavior和Text ...

  7. git-ftp 用git管理ftp空间

    ftp管理不能实现版本控制,而且多电脑工作时,同步很成问题. git-ftp可以完美的解决问题 下面是我的趟坑之路,本机的环境是win10,首先你的机器得装有git. git-ftp的地址https: ...

  8. c标签和foreach循环不能加载

    需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...

  9. Jmeter察看结果树的响应数据中的中文显示乱码问题处理

    1.Jmeter的察看结果树的响应数据有中文时会显示乱码,如图,我访问百度HTTP请求,响应数据中的title处是一串乱码 2.我们需要改一个设置,打开jmeter\bin\jmeter.proper ...

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

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