react入门介绍

react.js介绍

react.js的提出

react.js的首次提出是在2014年Facebook的f8大会上。顺便科普一下f8大会,f8大会是由Facebook组织的年度的技术峰会,之所以叫f8,就是看大家在8小时以内能做出哪些有意思的东西。
react.js称为颠覆式前端UI开发框架。目前基于html的前端开发变得越来越复杂,传统的开发方式基于来自服务器和来自用户输入的交互数据,动态反应到复杂界面的时候,代码量变得越来越大,难以维护。
比如,前端开发框架jquey,每次数据更新,必须手动把数据更新渲染到ui界面上,代码量极大。基于此,google推出的angular.js的双向数据绑定很好的解决了这个问题。但是angular.js也有自身的一些不足。1:angular过重,不适用于对性能要求特别高的站点。2:ui组件封装比较复杂,不利于重用。而react解决了所有的这些问题。
ReactJS官网地址:http://facebook.github.io/react/
Github地址:https://github.com/facebook/react

react.js的特点

1、就是轻,数据渲染响应非常快。

复杂或频繁的DOM操作通常是性能瓶颈产生的原因。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。

2:组件化开发思想。

React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

react试用场景

react 这么厉害到底适用于哪些场景呢?
1、复杂场景下的高性能要求。
2、重用组件库,组件组合。

react html、css基础实践

下面让我们来看看一组代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.redColor{
color: red;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function(){
var styleObj = {
textDecoration:'underline'
};
return <div className="redColor" style={{fontSize:'18px'}}>Hello {this.props.name}</div>
}
});
ReactDOM.render(
<Hello name="World"/>,
document.getElementById('example')
);
</script>
</body>
</html>

现在来解释一下这段代码
1.react用的是jsx,是facebook为react开发的一套语法糖。语法糖是计算机中添加的一种语法,对语言的功能没有影响,但是更方便程序员使用,增加可读性减少程序出错机会。类似的还有CoffeeScript、TypeScript等。最终都被解析库解析成js。这里引入的browser.js 就是jsx的解析库。作用是将 JSX 语法转为 JavaScript 语法。另外 <script> 标签的 type 属性为 text/babel 。表明这是jsx语法。

2.jsx为我们带来的便利就是,我们可以在js里写类dom的结构,比我们用原生js拼接字符串要简单方便许多。jsx语法允许我们生成原生的dom标签,还可以生成自定义标签。比如hello,这些统称为react components.通过调用ReactDOM将react components呈现在页面上。

3.ReactDOM.render是React的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。第一个参数是要插入的components,第二个参数是要插入的容器。
自定义的标签是通过React.createClass申明,参数是一个js的对象。return的内容就是渲染的结构。遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。

4.给标签添加css属性有两种:
一种:用外联样式,注意这里是className,因为这是jsx语法,class在js中已经是一个保留关键字。
二种:内联样式。在react中内联样式必须用样式对象来表示,在react中内联样式必须用样式对象来表示,必须用驼峰。且用{{}}包裹。这里为什么要用{{}},让我们再看看另一种写法就一目了然了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function(){
var styleObj = {
fontSize:'18px'
};
return <div className="redColor" style={styleObj}>Hello {this.props.name}</div>
}
});
ReactDOM.render(
<Hello name="World"/>,
document.getElementById('example')
);
</script>

这里申明一个样式对象,用{}包裹就能以js的方式来解析。和{{fontSize:"18px"}}异曲同工。
可以隐约的看到,react的组件通过样式对象的申明可以,react组件是html、css、js的集合,成为真正意义上的独立组件。

这次我们简单介绍了react的由来、特点、应用场景。以及,jsx语法糖,如何生成自定义标签,插入节点,添加css样式,这些都是react的基础,接下来,我们继续react compenents的生命周期。