前提聲明:此React系列,側(cè)重點是如何快速上手寫React代碼,對于一些基礎(chǔ)的概念不會詳細闡述,快速上手寫代碼,上手寫代碼,寫代碼(重要事情說三遍)
React簡介
這一款由Facebook出品的,用于構(gòu)建用戶界面的JavaScript框架
React核心編程思想
一.小歷程
??1.前端開發(fā),需要手動管理,操作DOM和監(jiān)控控件狀態(tài)變化,過程繁瑣,如此在大規(guī)模應(yīng)用情景下維護困難.
??2.解決頻繁操作DOM,那么,我這樣如何-每次狀態(tài)有更新的情況下重新渲染整個UI,便可省去一次一次手動改變DOM操作.
??3.新的問題來啦,每次都需要重新渲染整個UI效率低下,所以這個時候厲害的角色上場了,Virtual DOM!
厲害了,Virtual DOM 是什么鬼,必須得有小三插腳解釋下,場面才不會那么混亂.
–––––––––––––––––小三解釋虛擬DOM:–––––––––––––––
*1.概念
??虛擬 DOM 是在 DOM 的基礎(chǔ)上建立了一個抽象層，我們對數(shù)據(jù)和狀態(tài)所做的任何改動，都會被自動且高效的同步到虛擬 DOM坛缕，最后再批量同步到 DOM 中忿墅。React 會在內(nèi)存中維護一個虛擬 DOM 樹白华，當我們對這個樹進行讀或?qū)懙臅r候务傲，實際上是對虛擬 DOM 進行的.
*2.茍且之事的過程是是這樣的
??1>.數(shù)據(jù)更新;
??2>.React 會自動更新新虛擬DOM;
??3>.通過對比新虛擬DOM和舊虛擬DOM找出不同點(different),得到一個Patch;
??4>.將這個Patch放到一個隊列中;
??5>.最終'批量'更新Patch到DOM中;
這種事情怎么可能沒圖了,太不正常了(捉奸捉臟)
!01_Virtual DOM.png
??4.把所有的HTML組件都抽象化JS中,不在需要HTML模板,直接在JS中寫HTML;如何實現(xiàn)在如此霸道直接的操作,JSX來啦;Facebook在PHP已經(jīng)使用XHP很久了，把那套方法搬到JavaScript上就成了JSX譬巫。
JSX小語法小演示:
<script type="text/babel">
let title=(<div><strong>Hello JSX</strong></div>);
ReactDOM.render(
title,
document.querySelector('#app')
)
</script>
??5.UI的狀態(tài)和獲取的數(shù)據(jù)需要分開處理组哩，使用state和props的概念來區(qū)分它們等龙。
二.組件化
??除了不需要對DOM進行直接操作,提高性能;React中還有一個重要的思想是組件化,即UI中的每個組件都是獨立封裝的,同時,由于這些組件獨立于HTML,使他們不僅可以運行在瀏覽器里,還可以作為原生應(yīng)用的組件來運行.(組件類比積木,每塊小的積木都是獨立的一部分,能夠?qū)崿F(xiàn)特定效果)
React實操
其實我就是想寫個'Hello World';
一.前提準備
1.需要引入三個基本依賴文件(文件如何下載我就不廢話了,npm,bower等都行,你開心就好~)
/*1>.react.js文件是創(chuàng)建React元素和組件的核心文件处渣，
2>.react-dom.js文件用來把React組件渲染為DOM伶贰，
此文件依賴于react.js文件，需在其后被引入罐栈。
3>.Babel的主要用途是轉(zhuǎn)換新標準的JavaScript代碼為瀏覽器現(xiàn)今兼容的代碼黍衙，同時它也提供JSX語句的轉(zhuǎn)換；*/
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/babel.min.js"></script>
二.直接擼Hello World
<body>
<div id="app"></div>
<script type="text/babel">
//ReactDOM.render 是 React 的最基本方法荠诬，用于將模板轉(zhuǎn)為 HTML 語言琅翻，并插入指定的 DOM 節(jié)點。
ReactDOM.render(
<h3>welcome</h3>,
//document.querySelector()獲取指定節(jié)點(方法很多)
document.querySelector('#app')
)
</script>
</body>
三.組件化Hello World
??這兒有個重要問題必須討論,擦擦,為什么你這兒React組件要醬樣子定義,貌似和我的不一樣,要開車啦;
??React推出后柑贞，出于不同的原因先后出現(xiàn)三種定義react組件的方式方椎，殊途同歸；具體的三種方式：
1.函數(shù)式定義的無狀態(tài)組件
2.es5原生方式React.createClass定義的組件
3.es6形式的extends React.Component定義的組件
推薦閱讀,不重復造輪子了,總結(jié)的挺好:React創(chuàng)建組件的三種方式及其區(qū)別
//此處直接上現(xiàn)在推薦的方法啦~
<body>
<div id="app"></div>
<script type="text/babel">
class HelloWorld extends React.Component {
constructor() {
super();
this.state={
msg:''
};
}
render(){
return (<div>
<input type="text" defaultValue="abc" />
</div>)
}
}
ReactDOM.render(
<HelloWorld />,
document.querySelector('#app')
)
</script>
</body>
