1 认识React
1.1 React是Facebook内部的一个JavaScript类库,于2013年开源,可用于创建web用户界面
1.2 react是一个库,不是一个框架
1.3 react用来创建web用户界面,不做其他的事情
中文网站 http://www.reactjs.cn/
英文网站http://facebook.github.io/react/
2 React优势
2.1 传统方法
功能 对DOM进行大量的操作,注册大量的事件,完成相应的功能
缺点 需求可以使用,但是随着事件的增多,逻辑会越来越复杂,且性能不是很好
2.2 现代方法
React引用了虚拟DOM,基于React进行开发时所有的DOM结构都通过虚拟DOM进行,
每当数据发生改变,React都会从新构建整个DOM树,然后将当前整个DOM树和上一次
的DOM树进行对比,得到DOM结构的区别,然后仅仅对变化发部分进行实际的浏览器
DOM更新,由于虚拟DOM是内存数据,**性能极高**
注意!
1 在使用了React,既不必使用jQuery了
2 虚拟DOM的概念,讲我们从频繁的DOM操作中解放出来
3 React的质疑
对于react经常会听到一些反面说法,但是优点值得分析
- react不是MVC框架,它只专注于视图,也就是说V
- react是一种思想,提倡"learn once,write anywhere",分web版的react.js和原声app的react natvie
- 虚拟DOM / 组件化 / 状态机 / 单向数据流 是React的主要特性
- 核心思想:一个应用程序在不同的时间点,当底层数据改变,react会自动化处理所有用户界面的更新
4 React入门
4.1 React是一种思想,基于这个思想,有两大实现
✔React.js 针对web开发,使用的是html,css和js进行web UI 的开发
✔React Native 针对原生app开发,包括iOS平台,Android平台
1 官网下载 http://www.reactjs.cn/react/downloads.html/
react-15.3.1.zip(压缩包)
主要文件
1 react.min.js//react的核心文件
2 react-dom.min.js//针对web页面的DOM操作
3 browser.min.js//使得浏览器中支持jsx语法(需要单独下载)
代码如下
<html>
<head>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
//定义一个组件
var Hello = React.createClass({
//组件要渲染的内容
render : function(){
return (
<h2>这是react.js</h2>
);
}
});
//实例化一个Hello组件对象,渲染到页面的div#app中去
ReactDOM.render(<Hello />,document.getElementById("app"));
</script>
</body>
</html>
注意事项!
一 script标签的type属性需要变成text/babel(jsx语法解析使用)
二 创建组件的时候,使用的是react.createClass方法//构造器的方式(首字母是大写)
三 参数是一个对象,在render方法中,可以使用html标签和js的混合
四 return 返回的内容有且仅有一个根标签
五 在全部的代码中,凡是出现标签,都必须关闭
六 在ReactDOM.render方法第二个参数,必须使用DOM的原生方法获取节点
七 定义组件类的时候,类名必须是首字母大写
5 JSX(JavaScript+XML)
5.1 在react组件内部构建标签的类XML语法
- 在定义组件类的render方法中,return部分使用
- 在应用组件 ReactDOM.render方法中的第一个参数
- 只要使用了jsx语法就要设置script标签的type属性值为text/babel
注意事项!
✔如果是在HTML标签,直接使用XML标签语法
✔如果是js代码,需要使用 { } 括起来
XML 语法规定
1 必须拥有唯一的根元素
2 严格区分大小写
3 所以的元素都必须关闭
4 所有的元素都必须正确嵌套
5 所有的属性都应该有属性值
6 推荐使用XMLspy工具(检查语法)
5.4 JSX优点
简单 对于熟悉XML发开发人员都能轻松红掌握JSX
更加直观,可读性强
更加具有语法化
关注分离点,JSX干净的方式确保标签与业务逻辑相分离
5.5 JSX语法
属性设置(静态,动态)
1 静态属性,HTML标签固有的属性, W3C规定1 属性名的更改(两个)
- class =>> className
- for =>> htmlFor
2 行内样式
- 在HTML中也可以使用行内样式(使用js中的对象方式来设置)
- 使用js的对象方式来进行设置(不能使用CSS来进行设置//会报错)
ps { { } } 使用花括号来嵌套,外面的花括号表示解析js代码,内部表示js对象 - 注释 针对JSX语法而言,不同于js注释
ps 注释方式 {/注释内容/}
2 动态属性,自定义属性,由用户定义
**在js中直接书写HTML代码 其实就是react.js中的jsx语法
6 组件
6.1 组件其实就是具备独立功能的一个模块(UI部件),MVC是对数据和显示相分离,组件化则是对模块之间UI功能的分离
组件化的思想（类似于搭积木）
6.2 定义组件
在react中,所有的UI都是基于组件的,最基本的组件就是HTML标签(只需要将它们组合到一起,形成一个复杂的组件)
- 定义组件的方法:react对象中的createClass方法
- react对象是在react.js中定义好的,可以直接使用
**定义组件
在react中，所有的UI都是基于组件的
//定义一个CommentItem组件类
var CommentItemComponent = React.createClass({
getDefaultProps : function() {
return {
title : '默认标题',
content : '默认内容'
};
},
render : function(){
return (
<li>
<h3>{this.props.title}</h3>
<p>{this.props.content}</p>
<ButtonComponent operate="reply" />
</li>
);
}
});
//定义一个CommentList组件类
var CommentListComponent = React.createClass({
render : function(){
return (
<ul>
<CommentItemComponent title="自己定义的标题"/>
<CommentItemComponent title="标题1" content="组件！" />
<CommentItemComponent title="标题2" content="组件!" />
<CommentItemComponent title="标题3" content="组件"/>
</ul>
);
}
});
6.3 渲染组件
