react框架介绍

来源：互联网发布：淘宝卖家怎么做微淘编辑：程序博客网时间：2024/06/13 04:37

React是一个JavaScript框架，用于构建“可预期的”和“声明式的”Web用户界面，它已经使Facebook更快地开发Web应用。

一、特点：

1、简单简单的表述任意时间点你的应用应该是什么样子的，React将会自动的管理UI界面更新当数据发生变化的时候。

2、声明式在数据发生变化的时候，React从概念上讲与点击了F5一样，实际上它仅仅是更新了变化的一部分而已。React是关于构造可重用组件的，实际上，使用React你做的仅仅是构建组建。通过封装，使得组件代码复用、测试以及关注点分离更加容易。

另外还有以下注意点：

React不是一个MVC框架

React不使用模板

响应式更新非常简单

二、主要原理

传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新Virtual DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

Components 组件 

在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。

注：component 的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。

State 和 Render

React是如何呈现真实的DOM，如何渲染组件，什么时候渲染，怎么同步更新的，这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染，这里只能通过提供的setState方法更新数据

先看个官网demo：

<!DOCTYPE html>

<html>

<head>

<script src="http://fb.me/react-0.12.1.js"></script>

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/jsx">

React.render(

<h1>Hello, world!</h1>,

document.getElementById('example')

);

</script>

</body>

</html>

很简单，浏览器访问，可以看到Hello, world!字样。JSXTransformer.js是支持解析JSX语法的，JSX是可以在Javascript中写html代码的一种语法。如果不喜欢，React也提供原生Javascript的方法。

另外一个demo:

<html>

<head>

<title>Hello React</title>

<script src="http://fb.me/react-0.12.1.js"></script>

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

<style>

#content{

width: 800px;

margin: 0 auto;

padding: 5px 10px;

background-color:#eee;

}

.commentBox h1{

background-color: #bbb;

}

.commentList{

border: 1px solid yellow;

padding:10px;

}

.commentList .comment{

border: 1px solid #bbb;

padding-left: 10px;

margin-bottom:10px;

}

.commentList .commentAuthor{

font-size: 20px;

}

.commentForm{

margin-top: 20px;

border: 1px solid red;

padding:10px;

}

.commentForm textarea{

width:100%;

height:50px;

margin:10px 0 10px 2px;

}

</style>

</head>

<body>

<div id="content"></div>

<script type="text/jsx">

var staticData = [

{author: "张飞", text: "我在写一条评论~！"},

{author: "关羽", text: "2货，都知道你在写的是一条评论。。"},

{author: "刘备", text: "哎，咋跟这俩逗逼结拜了！"}

];

var converter = new Showdown.converter();//markdown

/** 组件结构：

<CommentBox>

<CommentList>

<Comment />

</CommentList>

<CommentForm />

</CommentBox>

*/

//评论内容组件

var Comment = React.createClass({

render: function (){

var rawMarkup = converter.makeHtml(this.props.children.toString());

return (

<div className="comment">

<h2 className="commentAuthor">

{this.props.author}:

</h2>

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

</div>

);

}

});

//评论列表组件

var CommentList = React.createClass({

render: function (){

var commentNodes = this.props.data.map(function (comment){

return (

<Comment author={comment.author}>

{comment.text}

</Comment>

);

});

return (

<div className="commentList">

{commentNodes}

</div>

);

}

});

//评论表单组件

var CommentForm = React.createClass({

handleSubmit: function (e){

e.preventDefault();

var author = this.refs.author.getDOMNode().value.trim();

var text = this.refs.text.getDOMNode().value.trim();

if(!author || !text){

return;

}

this.props.onCommentSubmit({author: author, text: text});

this.refs.author.getDOMNode().value = '';

this.refs.text.getDOMNode().value = '';

return;

},

render: function (){

return (

<form className="commentForm" onSubmit={this.handleSubmit}>

<input type="text" placeholder="Your name" ref="author" /><br/>

<textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/>

<input type="submit" value="Post" />

</form>

);

}

});

//评论块组件

var CommentBox = React.createClass({

loadCommentsFromServer: function (){

this.setState({data: staticData});

/*

方便起见，这里就不走服务端了，可以自己尝试

$.ajax({

url: this.props.url + "?_t=" + new Date().valueOf(),

dataType: 'json',

success: function (data){

this.setState({data: data});

}.bind(this),

error: function (xhr, status, err){

console.error(this.props.url, status, err.toString());

}.bind(this)

});

*/

},

handleCommentSubmit: function (comment){

//TODO: submit to the server and refresh the list

var comments = this.state.data;

var newComments = comments.concat([comment]);

//这里也不向后端提交了

staticData = newComments;

this.setState({data: newComments});

},

//初始化 相当于构造函数

getInitialState: function (){

return {data: []};

},

//组件添加的时候运行

componentDidMount: function (){

this.loadCommentsFromServer();

this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);

},

//组件删除的时候运行

componentWillUnmount: function() {

clearInterval(this.interval);

},

//调用setState或者父级组件重新渲染不同的props时才会重新调用

render: function (){

return (

<div className="commentBox">

<h1>Comments</h1>

<CommentList data={this.state.data}/>

<CommentForm onCommentSubmit={this.handleCommentSubmit} />

</div>

);

}

});

//当前目录需要有comments.json文件

//这里定义属性，如url、pollInterval，包含在props属性中

React.render(

<CommentBox url="comments.json" pollInterval="2000" />,

document.getElementById("content")

);

</script>

</body>

</html>

效果：

原文链接：http://www.jianshu.com/p/ae482813b791

阅读全文

0 0