React開發(fā)入門資料_第1頁(yè)
React開發(fā)入門資料_第2頁(yè)
React開發(fā)入門資料_第3頁(yè)
React開發(fā)入門資料_第4頁(yè)
React開發(fā)入門資料_第5頁(yè)
已閱讀5頁(yè)，還剩5頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

React開發(fā)入門一、前言近段時(shí)間看到學(xué)長(zhǎng)公司招聘ReactNative工程師，當(dāng)時(shí)比較好奇，就搜索了一下，然后剛好需要每個(gè)月買一本書看看，所以就買了一本《ReactiveNative開發(fā)指南》。但是看到里面的預(yù)備知識(shí)的時(shí)候，發(fā)現(xiàn)首先最好需要先了解一下React（書中寫道：我們假設(shè)你對(duì)React已經(jīng)有了一些了解），心想是不是還要買一本React的書籍，后來想想干脆直接從網(wǎng)上搜搜教程吧，因此開始去探索，最終找到了三個(gè)鏈接的內(nèi)容講的React還不錯(cuò)，一個(gè)是阮一峰的博客，一個(gè)是官方文檔，一個(gè)是React概覽。阮一峰的博客和React概覽都是中文的，而且寫的比較容易理解，而官方文檔是英文的，講解的都比較詳細(xì)。所以如果自己英文好的話可以直接看官方文檔。二、什么是ReactReact是一個(gè)JavaScript庫(kù)，是由FaceBook和Instagram開發(fā)的，主要用于用戶創(chuàng)建圖形化界面。三、開發(fā)環(huán)境的搭建做任何開發(fā)環(huán)境，我都會(huì)想著首先需要搭建一個(gè)環(huán)境來開發(fā)。就像如果開發(fā)iOS，你需要有蘋果電腦，然后從AppStore下載Xcode，然后就可以熟悉一個(gè)Xcode，看看文檔，就可以開始開發(fā)了；就像如果開發(fā)Android，你需要安裝AndroidStudio，然后需要安裝Java環(huán)境，然后就可以進(jìn)行開發(fā)了。對(duì)于React，經(jīng)過了解，我發(fā)現(xiàn)任何一個(gè)工具，比如SublimeText，IntelliJIDEA等等都可以，你甚至直接可以使用文本編輯器等等。這里面我使用的是IntelliJIDEA。1、安裝一個(gè)IntellJIDEA就可以進(jìn)行開發(fā)了。2、一個(gè)瀏覽器（這里面我使用的是Chrome）3、下載相關(guān)庫(kù)（下載鏈接）四、預(yù)備知識(shí)這個(gè)博客主要是介紹的React，我也假設(shè)一下：你需要對(duì)HTML，CSS，JavaScript有一定的了解，因?yàn)榇a大部分都是用這些來進(jìn)行開發(fā)的。五、最簡(jiǎn)單的React小程序我學(xué)任何語(yǔ)言的時(shí)候第一個(gè)程序都是一個(gè)Hello,World!?，F(xiàn)在就讓我們來利用React來寫一個(gè)最簡(jiǎn)單的Hello,World!直接上代碼：復(fù)制代碼<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Helloworld!</title><scriptsrc="../../build/react.js"></script><scriptsrc="../../build/react-dom.js"></script><scriptsrc="../../build/browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel">ReactDOM.render(<h1>Hello,World!</h1>,document.getElementById('example'));</script></body></html>復(fù)制代碼然后用瀏覽器打開就可以了（這里假設(shè)你已經(jīng)會(huì)使用IntellJIDEA，如果不會(huì)就先使用SublimeText），然后在瀏覽器里面就可以看到你特別熟悉的Hello,World！了。簡(jiǎn)單分析一下這個(gè)程序，首先，head里面引入了三個(gè)js文件。前兩個(gè)是react的js文件，你可以在目錄三里面的下載相關(guān)庫(kù)里面拿。還有一個(gè)是browser.min.js，為什么要引入這個(gè)js可以參考這個(gè)提問，其實(shí)是為了將JSX語(yǔ)法轉(zhuǎn)換成JavaScript語(yǔ)法。可以百度谷歌一下，下載該文件，也可以直接引用網(wǎng)上資源。然后就在html里面寫了一個(gè)script代碼塊：<scripttype="text/babel">ReactDOM.render(<h1>Hello,World!</h1>,document.getElementById('example'));</script>這里需要注意：首先，/h1>后面是此外，以前我們可能使用的是type是text/javascript，現(xiàn)在我們使用的text/babel。這是因?yàn)镽eact獨(dú)有的JSX語(yǔ)法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type=“text/babel”。是不是已經(jīng)開放蒙圈了，剛才提了好幾個(gè)JSX，什么是JSX呢？React官方文檔里面的解釋是：XML語(yǔ)法內(nèi)部包含JavaScript被叫做JSX。但是我理解的應(yīng)該是我們直接在JS里面嵌入了HTML，這個(gè)就是React提出的叫做JSX的語(yǔ)法吧。這樣做的好處就是一個(gè)組件的開發(fā)過程中，HTML是必不可少的一部分，能夠?qū)TML封裝起來才是組件的完全體。JSX語(yǔ)法的產(chǎn)生，讓前端實(shí)現(xiàn)組件化成為了可能。JSX的基本語(yǔ)法規(guī)則：遇到HTML標(biāo)簽(以<開頭)，就用HTML規(guī)則解析；遇到代碼塊(以{開頭)，就用JavaScript規(guī)則解析。在ReactDOM.render里面寫了兩行，他們的作用就是將h1標(biāo)題插入example節(jié)點(diǎn)。你也可以直接新建一個(gè)js文件，然后將body里script里面的代碼直接放到里面，我們可以命名為helloworld.js，然后在head里面導(dǎo)入即可。我比較傾向于這種做法，因?yàn)橹辽賖tml文件不會(huì)看著太大，而且方便引入管理。如果其他html也需要改代碼塊，直接引入即可。六、基礎(chǔ)語(yǔ)法介紹1、ReactDOM.render()ReactDOM.render是React最基本的語(yǔ)法，用于將模板轉(zhuǎn)換成HTML語(yǔ)言，并插入指定的DOM節(jié)點(diǎn)。ReactDOM.render(<h1>Hello,World!</h1>,document.getElementById('example'));運(yùn)行結(jié)果如下：2、map（遍歷）將數(shù)組中的元素遍歷賦值復(fù)制代碼varanimals=['dog','cat','pig'];ReactDOM.render(<div>{animals.map(function(animal){return<h1>{animal}</h1>})}</div>,document.getElementById('example'));復(fù)制代碼從這里開始都是講React代碼放到了.js文件里面，然后在html文件里面引入。引入的時(shí)候記得寫type=’text/babel’。這里會(huì)有一個(gè)小問題：打開瀏覽器的調(diào)試工具后，里面會(huì)看到Warning如下：Warning:Eachchildinanarrayoriteratorshouldhaveaunique"key"prop.Checkthetop-levelrendercallusing<div>解決方法如下：復(fù)制代碼varanimals=['dog','cat','pig'];ReactDOM.render(<div>{animals.map(function(animal,key){return<h1key={key}>{animal}</h1>})}</div>,document.getElementById('example'));復(fù)制代碼警告的意思是最好給循環(huán)產(chǎn)生的child添加一個(gè)key。這樣就可以接觸警告了。運(yùn)行結(jié)果如下：這里面你也許還會(huì)遇到另外一個(gè)問題，那就是用的SublimeText，然后太瀏覽器打開的時(shí)候提示：browser.min.js:3XMLHttpRequestcannotloadfile:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.Crossoriginrequestsareonlysupportedforprotocolschemes:http,data,chrome,chrome-extension,https,chrome-extension-resource.其實(shí)是因?yàn)槲覀儗s單獨(dú)拉出來文件導(dǎo)致的，但是你會(huì)發(fā)現(xiàn)如果使用Safari瀏覽器是沒有這個(gè)問題的。在這里找到了答案：復(fù)制代碼startupchromewith--disable-web-securityOnWindows:chrome.exe--disable-web-securityOnMac:open/Applications/Google\Chrome.app/--args--disable-web-security復(fù)制代碼因?yàn)镃hrome瀏覽器不支持本地ajax訪問。你也可以構(gòu)建本地服務(wù)器進(jìn)行訪問，比如我使用的intellJIDEA，直接就是在本地構(gòu)建了一個(gè)本地服務(wù)，此時(shí)訪問地址為：http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html而沒有構(gòu)建本地服務(wù)的時(shí)候訪問地址為：file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html3、組件化因?yàn)镽eact使用的是JSX，所以它允許將代碼封裝成組件（component），然后像普通的HTML標(biāo)簽一樣插入。復(fù)制代碼React.createClass方法就是用于生成一個(gè)組件類，比如：varZGButton=React.createClass({render:function(){return<button>ZG{}</button>}});ReactDOM.render(<ZGButtonname='Button1'/>,document.getElementById('example'));復(fù)制代碼運(yùn)行結(jié)果如下：上面的ZGButton就是一個(gè)組件類，模板插入<ZGButton/>，會(huì)自動(dòng)生成一個(gè)該組件的實(shí)例。所有組件類都必須有自己的render方法，用于輸出組件?，F(xiàn)在代碼這樣寫：復(fù)制代碼varzGButton=React.createClass({render:function(){return<button>ZG{}</button>}});ReactDOM.render(<zGButtonname="Button2">Button</zGButton>,document.getElementById('example'));復(fù)制代碼也就是將組件類的第一個(gè)字符小寫，然后在引用的時(shí)候發(fā)現(xiàn)現(xiàn)在是雙標(biāo)簽了（代碼自動(dòng)填充的時(shí)候出現(xiàn)），而且name失效。因此我們?cè)陂_發(fā)組件的時(shí)候一定要將第一個(gè)首字符大寫，否則將不會(huì)達(dá)到你想要的效果。4、ps對(duì)象的屬性和組件的屬性一一對(duì)應(yīng)，但是有個(gè)children除外，它表示的是組件的所有子節(jié)點(diǎn)：復(fù)制代碼varStudents=React.createClass({render:function(){return(<ol>{React.Children.map(ps.children,function(child){return<li>{child}</li>})}</ol>);}});ReactDOM.render(<Students><span>zhangsan</span><span>lisi</span></Students>,document.getElementById('example'));復(fù)制代碼此時(shí)輸出的結(jié)果為：5、PropTypes組件就類似與我們OC開發(fā)或者Java開發(fā)中的類，類可以進(jìn)行屬性添加，組件也可以。組件的屬性可以接受任意值，字符串、對(duì)象、函數(shù)都行。這里面有一個(gè)propTypes，可以用來限定提供的屬性是否滿足要求：復(fù)制代碼varStudent=React.createClass({propTypes:{myName:React.PropTypes.string.isRequired,},render:function(){return<h1>{ps.myName}</h1>}});varmyNameStr="React";ReactDOM.render(<StudentmyName={myNameStr}/>,document.getElementById('example'));復(fù)制代碼這里面的propTypes里面的是對(duì)屬性的限制，比如這里必須是string類型，值是必須的。我們還可以去設(shè)置默認(rèn)屬性值：復(fù)制代碼varStudent=React.createClass({getDefaultProps:function(){return{myName:"DefaultReact"}},propTypes:{myName:React.PropTypes.string.isRequired,},render:function(){return<h1>{ps.myName}</h1>}});復(fù)制代碼這里面的getDefaultProps就類似與我們?cè)陂_發(fā)iOS或者Java的時(shí)候?qū)β暶鲗傩缘臅r(shí)候進(jìn)行賦初始化值。6、VirtualDOM組件并不是真實(shí)的DOM節(jié)點(diǎn)，而是存在于內(nèi)存中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬DOM，只有插入文檔的時(shí)候才會(huì)變成真實(shí)的DOM。根據(jù)React的設(shè)計(jì)，當(dāng)重新渲染組件的時(shí)候，會(huì)通多diff尋找到變更的DOM節(jié)點(diǎn)，再把這個(gè)修改更新到瀏覽器實(shí)際的DOM節(jié)點(diǎn)上，所以實(shí)際上并不是渲染整個(gè)DOM數(shù)，這個(gè)VirtualDOM是一個(gè)純粹的JS數(shù)據(jù)結(jié)構(gòu)，性能比原生DOM快很多。這里面我們可以用通過ref屬性來獲取真實(shí)的DOM屬性：復(fù)制代碼varMyComponment=React.createClass({render:function(){return(<div><inputtype="text"ref="myTextInput"/><inputtype="button"value="Focusthetextinput"onClick={this.handleClick}/></div>);},handleClick:function(){//alert(this.refs.myTextInput);this.refs.myTextInput.focus();}});ReactDOM.render(<MyComponment/>,document.getElementById('example'));復(fù)制代碼這里需要注意的是，因?yàn)槲覀兪褂玫氖钦鎸?shí)的DOM對(duì)象，所以一定要確保DOM插入文檔之后才能夠使用。7、this.state我們可以通過this.state來拿到組件的狀態(tài)：復(fù)制代碼varLinkButton=React.createClass({getInitialState:function(){return{linked:false};},handleClick:function(){this.setState({linked:!this.state.linked});},render:function(){vartext=this.state.linked?'linked':'notlinked';return(<ponClick={this.handleClick}>You{text}this.Clicktotoggle</p>);}});ReactDOM.render(<LinkButton/>,document.getElementById('example'));復(fù)制代碼這里面我設(shè)置了一個(gè)linked的狀態(tài)（是否連接）,這里通過this.state拿到當(dāng)前狀態(tài)，通過this.setState來設(shè)置狀態(tài)。8、表單表單填寫是用戶和組件的互動(dòng)：復(fù)制代碼varForm=React.createClass({getInitialState:function(){return{value:'Hello'};},handleChange:function(event){this.setState({value:event.target.value});},render:function(){varvalue=this.state.value;return(<div><inputtype="text"value={value}onChange={this.handleChange}/><p>{value}</p></div>);}});ReactDOM.render(<Form/>,document.getElementById('example'));復(fù)制代碼9、ComponentLifecycle組件有三個(gè)主要的生命周期：Mounting:組件插入到DOMUpdating:組件被重新渲染，如果DOM需要更新Unmounting:從DOM中刪除組件React為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did在進(jìn)入狀態(tài)之后調(diào)用。詳情可參見這里。復(fù)制代碼varMyButton=React.createClass({componentDidMount:function(){alert("已經(jīng)裝載");},componentWillMount:function(){alert("將要裝載");},componentWillUpdate:function(){alert("將要更新");},componentDidUpdate:function(){alert("已經(jīng)更新");},componentWillUnmount:function(){alert("將要移除");},render:function(){return(<button>MyButton</button>);},});varLoadButton=React.createClass({loadMyButton:function(){ReactDOM.render(<MyButton/>,document.getElementById('myBTN'));},removeMyButton:function(){varresult=ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));console.log(result);},render:function(){return(<div><buttononClick={this.removeMyButton}>卸載MyButton</button><buttononClick={this.loadMyButton}>裝載MyButton</button><divid="myBTN">這里是nquyu</div></div>);}});ReactDOM.render(<LoadButton/>,document.getElementById('example'));復(fù)制代碼10、Ajax組件的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論