React是Facebook開發(fā)的一款JS庫，那么Facebook為什么要建造React呢，主要為了解決什么問題，通過這個(gè)又是如何解決的？
從這幾個(gè)問題出發(fā)我就在網(wǎng)上搜查了一下，有這樣的解釋。
Facebook認(rèn)為MVC無法滿足他們的擴(kuò)展需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得非常復(fù)復(fù)雜，每當(dāng)需要添加一項(xiàng)新的功能或特性時(shí)，系統(tǒng)的復(fù)雜度就成級(jí)數(shù)增長，致使代碼變得脆弱和不可預(yù)測，結(jié)果導(dǎo)致他們的MVC正在土崩瓦解。認(rèn)為MVC不適合大規(guī)模應(yīng)用，當(dāng)系統(tǒng)中有很多的模型和相應(yīng)的視圖時(shí)，其復(fù)雜度就會(huì)迅速擴(kuò)大，非常難以理解和調(diào)試，特別是模型和視圖間可能存在的雙向數(shù)據(jù)流動(dòng)。
解決這個(gè)問題需要“以某種方式組織代碼，使其更加可預(yù)測”，這通過他們(Facebook)提出的Flux和React已經(jīng)完成。
Flux是一個(gè)系統(tǒng)架構(gòu)，用于推進(jìn)應(yīng)用中的數(shù)據(jù)單向流動(dòng)。React是一個(gè)JavaScript框架，用于構(gòu)建“可預(yù)期的”和“聲明式的”Web用戶界面，它已經(jīng)使Facebook更快地開發(fā)Web應(yīng)用
對于Flux，目前還沒怎么研究，不怎么懂，這里就先把Flux的圖放上來，有興趣或者了解的可以再分享下，這里主要說下React。
那么React是解決什么問題的，在官網(wǎng)可以找到這樣一句話：
We built React to solve one problem: building large applications with data that changes over time.
構(gòu)建那些數(shù)據(jù)會(huì)隨時(shí)間改變的大型應(yīng)用，做這些，React有兩個(gè)主要的特點(diǎn)：
另外在React官網(wǎng)上，通過《Why did we build React?》為什么我們要建造React的文檔中還可以了解到以下四點(diǎn)：
Virtual DOM 虛擬DOM
傳統(tǒng)的web應(yīng)用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作，提供了一種不同的而又強(qiáng)大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM,一個(gè)輕量級(jí)的虛擬的DOM，就是React抽象出來的一個(gè)對象，描述dom應(yīng)該什么樣子的，應(yīng)該如何呈現(xiàn)。通過這個(gè)Virtual DOM去更新真實(shí)的DOM，由這個(gè)Virtual DOM管理真實(shí)DOM的更新。
為什么通過這多一層的Virtual DOM操作就能更快呢？ 這是因?yàn)镽eact有個(gè)diff算法，更新Virtual DOM并不保證馬上影響真實(shí)的DOM，React會(huì)等到事件循環(huán)結(jié)束，然后利用這個(gè)diff算法，通過當(dāng)前新的dom表述與之前的作比較，計(jì)算出最小的步驟更新真實(shí)的DOM。
component 的使用在 React 里極為重要, 因?yàn)?components 的存在讓計(jì)算 DOM diff 更。
State 和 Render
React是如何呈現(xiàn)真實(shí)的DOM，如何渲染組件，什么時(shí)候渲染，怎么同步更新的，這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，將會(huì)調(diào)用Render重現(xiàn)渲染，這里只能通過提供的setState方法更新數(shù)據(jù)。
好了，說了這么多，下面看寫代碼吧，先看一個(gè)官網(wǎng)上提供的Hello World的示例：
<!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>
這個(gè)很簡單，瀏覽器訪問，可以看到Hello, world!字樣。JSXTransformer.js是支持解析JSX語法的，JSX是可以在Javascript中寫html代碼的一種語法。如果不喜歡，React也提供原生Javascript的方法。
再來看下另外一個(gè)例子：
<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: "關(guān)羽", text: "2貨，都知道你在寫的是一條評論。。"},
{author: "劉備", text: "哎，咋跟這倆逗逼結(jié)拜了！"}
];
var converter = new Showdown.converter();//markdown
/** 組件結(jié)構(gòu)：
<CommentBox>
<CommentList>
<Comment />
</CommentList>
<CommentForm />
</CommentBox>
*/
//評論內(nèi)容組件
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});
/*
方便起見，這里就不走服務(wù)端了，可以自己嘗試
$.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});
},
//初始化 相當(dāng)于構(gòu)造函數(shù)
getInitialState: function (){
return {data: []};
},
//組件添加的時(shí)候運(yùn)行
componentDidMount: function (){
this.loadCommentsFromServer();
this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
//組件刪除的時(shí)候運(yùn)行
componentWillUnmount: function() {
clearInterval(this.interval);
},
//調(diào)用setState或者父級(jí)組件重新渲染不同的props時(shí)才會(huì)重新調(diào)用
render: function (){
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
</div>
);
}
});
//當(dāng)前目錄需要有comments.json文件
//這里定義屬性，如url、pollInterval，包含在props屬性中
React.render(
<CommentBox url="comments.json" pollInterval="2000" />,
document.getElementById("content")
);
</script>
</body>
</html>
乍一看挺多，主要看腳本部分就可以了。方便起見，這里都沒有走后端。定義了一個(gè)全局的變量staticData，可權(quán)當(dāng)是走服務(wù)端，通過瀏覽器的控制臺(tái)改變staticData的值，查看下效果，提交一條評論，查看下staticData的值的變化。
國外應(yīng)用的較多，facebook、Yahoo、Reddit等。在github可以看到一個(gè)列表Sites-Using-React，國內(nèi)的話，查了查，貌似比較少，目前知道的有一個(gè)杭州大搜車。大多技術(shù)要在國內(nèi)應(yīng)用起來一般是較慢的，不過React確實(shí)感覺比較特殊，特別是UI的組件化和Virtual DOM的思想，我個(gè)人比較看好，有興趣繼續(xù)研究研究。
和其他一些js框架相比，React怎樣，比如Backbone、Angular等。
與傳統(tǒng)PC桌面不同，手機(jī)屏幕的尺寸更加小巧操作，方式也已觸控為主，APP界面設(shè)計(jì)不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實(shí)用性，在保證其擁有流暢的操作感受的同時(shí)，滿足人們的審美需求。
接下來為大家介紹幾款手機(jī)appui界面設(shè)計(jì)
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
--手機(jī)appUI設(shè)計(jì)--
（以上圖片均來源于網(wǎng)絡(luò)）
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
更多精彩文章：
閉包是一個(gè)讓初級(jí)JavaScript使用者既熟悉又陌生的一個(gè)概念。因?yàn)殚]包在我們書寫JavaScript代碼時(shí)，隨處可見，但是我們又不知道哪里用了閉包。
關(guān)于閉包的定義，網(wǎng)上(書上)的解釋總是千奇百怪，我們也只能“取其精華去其糟粕”去總結(jié)一下。
ECMAScript中，閉包指的是：
從實(shí)踐角度：一下才算是閉包：
閉包跟詞法作用域，作用域鏈，執(zhí)行上下文這幾個(gè)JavaScript中重要的概念都有關(guān)系，因此要想真的理解閉包，至少要對那幾個(gè)概念不陌生。
閉包的優(yōu)點(diǎn)：
閉包的缺點(diǎn)：
我們來一步一步引出閉包。
自執(zhí)行函數(shù)也叫立即調(diào)用函數(shù)(IIFE)，是一個(gè)在定義時(shí)就執(zhí)行的函數(shù)。
var a=1;
(function() { console.log(a)
})()上述代碼是一個(gè)最簡單的自執(zhí)行函數(shù)。
在ES6之前，是沒有塊級(jí)作用域的，只有全局作用域和函數(shù)作用域，因此自執(zhí)行函數(shù)還能在ES6之前實(shí)現(xiàn)塊級(jí)作用域。
// ES6 塊級(jí)作用域 var a = 1; if(true) { let a=111; console.log(a); // 111 } console.log(a); // 1 這里 if{} 中用let聲明了一個(gè) a。這個(gè) a 就具有塊級(jí)作用域，在這個(gè) {} 中訪問 a ，永遠(yuǎn)訪問的都是 let 聲明的a，跟全局作用域中的a沒有關(guān)系。如果我們把 let 換成 var ，就會(huì)污染全局變量 a 。
如果用自執(zhí)行函數(shù)來實(shí)現(xiàn)：
var a = 1;
(function() { if(true) { var a=111; console.log(a); // 111 }
})() console.log(a); // 1為什么要在這里要引入自執(zhí)行函數(shù)的概念呢？因?yàn)橥ǔＮ覀儠?huì)用自執(zhí)行函數(shù)來創(chuàng)建閉包，實(shí)現(xiàn)一定的效果。
來看一個(gè)基本上面試提問題：
for(var i=0;i<5;i++) {
setTimeout(function() { console.log(i);
},1000)
}在理想狀態(tài)下我們期望輸出的是 0 ，1 ，2 ，3 ，4。但是實(shí)際上輸出的是5 ，5 ，5 ，5 ，5。為什么是這樣呢？其實(shí)這里不僅僅涉及到作用域，作用域鏈還涉及到Event Loop、微任務(wù)、宏任務(wù)。但是在這里不講這些。
下面我們先解釋它為什么會(huì)輸出 5個(gè)5，然后再用自執(zhí)行函數(shù)來修改它，以達(dá)到我們預(yù)期的結(jié)果。
提示：for 循環(huán)中，每一次的都聲明一個(gè)同名變量，下一個(gè)變量的值為上一次循環(huán)執(zhí)行完同名變量的值。
首先用var聲明變量 for 是不會(huì)產(chǎn)生塊級(jí)作用域的，所以在 () 中聲明的 i 為全局變量。相當(dāng)于：
// 偽代碼 var i; for(i=0;i<5;i++) {
setTimeout(function() { console.log(i);
},1000)
}setTimeout中的第一個(gè)參數(shù)為一個(gè)全局的匿名函數(shù)。相當(dāng)于：
// 偽代碼 var i; var f = function() { console.log(i);
} for(i=0;i<5;i++) {
setTimeout(f,1000)
}由于setTimeout是在1秒之后執(zhí)行的，這個(gè)時(shí)候for循環(huán)已經(jīng)執(zhí)行完畢，此時(shí)的全局變量 i 已經(jīng)變成了 5 。1秒后5個(gè)setTimeout中的匿名函數(shù)會(huì)同時(shí)執(zhí)行，也就是5個(gè) f 函數(shù)執(zhí)行。這個(gè)時(shí)候 f 函數(shù)使用的變量 i 根據(jù)作用域鏈的查找規(guī)則找到了全局作用域中的 i 。因此會(huì)輸出 5 個(gè)5。
那我們怎樣來修改它呢？
for(var i=0;i<5;i++) {
(function (){ setTimeout(function() { console.log(i);
},1000)
})();
}上述例子會(huì)輸出我們期望的值嗎？答案是否。為什么呢？我們雖然把 setTimeout 包裹在一個(gè)匿名函數(shù)中了，但是當(dāng)setTimeout中匿名函數(shù)執(zhí)行時(shí)，首先去匿名函數(shù)中查找 i 的值，找不到還是會(huì)找到全局作用域中，最終 i 的值仍然是全局變量中的 i ，仍然為 5個(gè)5.
那我們把外層的匿名函數(shù)中聲明一個(gè)變量 j 讓setTimeout中的匿名函數(shù)訪問這個(gè) j 不就找不到全局變量中的變量了嗎。
for(var i=0;i<5;i++) {
(function (){ var j = i;
setTimeout(function() { console.log(j);
},1000)
})();
}這個(gè)時(shí)候才達(dá)到了我們預(yù)期的結(jié)果：0 1 2 3 4。
我們來優(yōu)化一下：
for(var i=0;i<5;i++) {
(function (i){ setTimeout(function() { console.log(i);
},1000)
})(i);
}*思路2：用 let 聲明變量，產(chǎn)生塊級(jí)作用域。
for(let i=0;i<5;i++) {
setTimeout(function() { console.log(i);
},1000)
}這時(shí)for循環(huán)5次，產(chǎn)生 5 個(gè)塊級(jí)作用域，也會(huì)聲明 5 個(gè)具有塊級(jí)作用域的變量 i ，因此setTimeout中的匿名函數(shù)每次執(zhí)行時(shí)，訪問的 i 都是當(dāng)前塊級(jí)作用域中的變量 i 。
什么是理論中的閉包？就是看似像閉包，其實(shí)并不是閉包。它只是類似于閉包。
function foo() { var a=2; function bar() { console.log(a); // 2 }
bar();
}
foo();上述代碼根據(jù)最上面我們對閉包的定義，它并不完全是閉包，雖然是一個(gè)函數(shù)可以訪問另一個(gè)函數(shù)中的變量，但是被嵌套的函數(shù)是在當(dāng)前詞法作用域中被調(diào)用的。
我們怎樣把上述代碼foo 函數(shù)中的bar函數(shù)，在它所在的詞法作用域外執(zhí)行呢？
下面的代碼就清晰的展示了閉包：
function foo() { var a=2; function bar() { console.log(a);
} return bar;
} var baz=foo();
baz(); // 2 —— 朋友，這就是閉包的效果。上述代碼中 bar 被當(dāng)做 foo函數(shù)返回值。foo函數(shù)執(zhí)行后把返回值也就是 bar函數(shù) 賦值給了全局變量 baz。當(dāng) baz 執(zhí)行時(shí)，實(shí)際上也就是 bar 函數(shù)的執(zhí)行。我們知道 foo 函數(shù)在執(zhí)行后，foo 的內(nèi)部作用域會(huì)被銷毀，因?yàn)橐嬗欣厥掌趤磲尫挪辉偈褂玫膬?nèi)存空間。所以在bar函數(shù)執(zhí)行時(shí)，實(shí)際上foo函數(shù)內(nèi)部的作用域已經(jīng)不存在了，理應(yīng)來說 bar函數(shù) 內(nèi)部再訪問 a 變量時(shí)是找不到的。但是閉包的神奇之處就在這里。由于 bar 是在 foo 作用域中被聲明的，所以 bar函數(shù) 會(huì)一直保存著對 foo 作用域的引用。這時(shí)就形成了閉包。
我們先看個(gè)例子：
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope;
} return f;
} var foo = checkscope();
foo();
我們用偽代碼來解釋JavaScript引擎在執(zhí)行上述代碼時(shí)的步驟：
JavaScript引擎遇到可執(zhí)行代碼時(shí)，就會(huì)進(jìn)入一個(gè)執(zhí)行上下文(環(huán)境)
但是我們想一個(gè)問題，checkscope函數(shù)執(zhí)行完畢，它的執(zhí)行上下文從棧中彈出，也就是銷毀了不存在了，f 函數(shù)還能訪問包裹函數(shù)的作用域中的變量(scope)嗎？答案是可以。
理由是在第6步，我們說過當(dāng)checkscope 執(zhí)行函數(shù)執(zhí)行完畢時(shí)，它的執(zhí)行上下文會(huì)從棧中彈出，此時(shí)活動(dòng)對象也會(huì)被回收，按理說當(dāng) f 在訪問checkscope的活動(dòng)對象時(shí)是訪問不到的。
其實(shí)這里還有個(gè)概念，叫做作用域鏈：當(dāng) checkscope 函數(shù)被創(chuàng)建時(shí)，會(huì)創(chuàng)建對應(yīng)的作用域鏈，里面值存放著包裹它的作用域?qū)?yīng)執(zhí)行上下文的變量對象，在這里只是全局執(zhí)行上下文的變量對象，當(dāng)checkscope執(zhí)行時(shí)，此時(shí)的作用域鏈變化了 ，里面存放的是變量對象(活動(dòng)對象)的集合，最頂端是當(dāng)前函數(shù)的執(zhí)行上下文的活動(dòng)對象。端是全局執(zhí)行上下文的變量對象。類似于：
checkscope.scopeChain = [
checkscope.AO
global.VO
] 當(dāng)checkscope執(zhí)行碰到了 f 函數(shù)的創(chuàng)建，因此 f 函數(shù)也會(huì)創(chuàng)建對應(yīng)的作用域鏈，默認(rèn)以包裹它的函數(shù)執(zhí)行時(shí)對應(yīng)的作用域鏈為基礎(chǔ)。因此此時(shí) f 函數(shù)創(chuàng)建時(shí)的作用域鏈如下：
checkscope.scopeChain = [
checkscope.AO
global.VO
]當(dāng) f 函數(shù)執(zhí)行時(shí)，此時(shí)的作用域鏈變化如下：
checkscope.scopeChain = [
f.AO
checkscope.AO
global.VO
]當(dāng)checkscope函數(shù)執(zhí)行完畢，內(nèi)部作用域會(huì)被回收，但是 f函數(shù) 的作用域鏈還是存在的，里面存放著 checkscope函數(shù)的活動(dòng)對象，因此在f函數(shù)執(zhí)行時(shí)會(huì)從作用域鏈中查找內(nèi)部使用的 scope 標(biāo)識(shí)符，從而在作用域鏈的第二位找到了，也就是在 checkscope.AO 找到了變量scope的值。
正是因?yàn)?code style="box-sizing:border-box;font-family:SFMono-Regular, Menlo, Monaco, Consolas, "font-size:14px;color:#E83E8C;overflow-wrap:break-word;">JavaScript做到了這一點(diǎn)，因此才會(huì)有閉包的概念。還有人說閉包并不是為了擁有它采取設(shè)計(jì)它的，而是設(shè)計(jì)作用域鏈時(shí)的副作用產(chǎn)物。
閉包是JavaScript中最難的點(diǎn)，也是平常面試中常問的問題，我們必須要真正的去理解它，如果只靠死記硬背是經(jīng)不起考驗(yàn)的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com