首頁 > 文章 > web前端 > react框架可以做什麼？ react框架的詳細介紹（附完整的使用實例）

react框架可以做什麼？ react框架的詳細介紹（附完整的使用實例）

寻∝梦原創: 2018-09-11 16:45:1712369瀏覽

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>
<p id="example"></p>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById(&#39;example&#39;)
);
</script>
</body>
</html>

很簡單，瀏覽器訪問，可以看到Hello, world!字樣。 JSXTransformer.js是支援解析JSX語法的，JSX是可以在Javascript中寫html程式碼的一種語法。如果不喜歡，React也提供原生Javascript的方法。（想看更多就到PHP中文網React參考手冊欄位中學習）

另一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>
<p id="content"></p>
<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 (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}:
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</p>
);
}
});
//评论列表组件
var CommentList = React.createClass({
render: function (){
var commentNodes = this.props.data.map(function (comment){
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<p className="commentList">
{commentNodes}
</p>
);
}
});
//评论表单组件
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 = &#39;&#39;;
this.refs.text.getDOMNode().value = &#39;&#39;;
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: &#39;json&#39;,
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 (
<p className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</p>
);
}
});
//当前目录需要有comments.json文件
//这里定义属性，如url、pollInterval，包含在props属性中
React.render(
<CommentBox url="comments.json" pollInterval="2000" />,
document.getElementById("content")
);
</script>
</body>
</html>

效果：

react框架可以做什麼？ react框架的詳細介紹（附完整的使用實例）

#本篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是react框架可以做什麼？ react框架的詳細介紹（附完整的使用實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript mvc html mvc框架封装循环 JS 对象事件 dom 算法 ui

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用react建置應用程式？ React+Redux建構大型應用的步驟詳情下一篇：如何使用react建置應用程式？ React+Redux建構大型應用的步驟詳情

看更多