React开发入门
目錄： 一、前言 二、什么是React 三、開發(fā)環(huán)境搭建 四、預(yù)備知識 五、最簡單的React小程序 六、基礎(chǔ)語法介紹 七、總結(jié) 八、參考資料 一、前言 近段時間看到學(xué)長公司招聘React Native工程師，當(dāng)時比較好奇，就搜索了一下，然后剛好需要每個月買一本書看看，所以就買了一本《Reactive Native 開發(fā)指南》。 但是看到里面的預(yù)備知識的時候，發(fā)現(xiàn)首先最好需要先了解一下React（書中寫道：我們假設(shè)你對React已經(jīng)有了一些了解），心想是不是還要買一本React的書籍，后來想想干脆直接從網(wǎng)上搜搜教程吧，因此開始去探索，最終找到了三個鏈接的內(nèi)容講的React還不錯，一個是阮一峰的博客，一個是官方文檔，一個是React概覽。阮一峰的博客和React概覽都是中文的，而且寫的比較容易理解，而官方文檔是英文的，講解的都比較詳細(xì)。所以如果自己英文好的話可以直接看官方文檔。 二、什么是React React是一個JavaScript庫，是由FaceBook和Instagram開發(fā)的，主要用于用戶創(chuàng)建圖形化界面。 三、開發(fā)環(huán)境的搭建 做任何開發(fā)環(huán)境，我都會想著首先需要搭建一個環(huán)境來開發(fā)。就像如果開發(fā)iOS，你需要有蘋果電腦，然后從AppStore下載Xcode，然后就可以熟悉一個Xcode，看看文檔，就可以開始開發(fā)了；就像如果開發(fā)Android，你需要安裝Android Studio，然后需要安裝Java環(huán)境，然后就可以進(jìn)行開發(fā)了。對于React，經(jīng)過了解，我發(fā)現(xiàn)任何一個工具，比如Sublime Text，IntelliJ IDEA等等都可以，你甚至直接可以使用文本編輯器等等。這里面我使用的是IntelliJ IDEA。 1、安裝一個IntellJ IDEA就可以進(jìn)行開發(fā)了。 ? ? ? ? ? 2、一個瀏覽器（這里面我使用的是Chrome） ? ? ? ? ? 3、下載相關(guān)庫（下載鏈接） 四、預(yù)備知識 這個博客主要是介紹的React，我也假設(shè)一下：你需要對HTML，CSS，JavaScript有一定的了解，因?yàn)榇a大部分都是用這些來進(jìn)行開發(fā)的。 五、最簡單的React小程序 我學(xué)任何語言的時候第一個程序都是一個Hello,World!。現(xiàn)在就讓我們來利用React來寫一個最簡單的Hello,World! 直接上代碼： <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Hello world!</title><script src = "../../build/react.js"></script><script src = "../../build/react-dom.js"></script><script src = "../../build/browser.min.js"></script>
</head>
<body><div id = "example"></div><script type="text/babel">ReactDOM.render(<h1>Hello,World!</h1>,
document.getElementById('example'));</script>
</body>
</html> 然后用瀏覽器打開就可以了（這里假設(shè)你已經(jīng)會使用IntellJ IDEA，如果不會就先使用Sublime Text），然后在瀏覽器里面就可以看到你特別熟悉的Hello,World！了。 簡單分析一下這個程序，首先，head里面引入了三個js文件。前兩個是react的js文件，你可以在目錄三里面的下載相關(guān)庫里面拿。還有一個是browser.min.js，為什么要引入這個js可以參考這個提問，其實(shí)是為了將JSX語法轉(zhuǎn)換成JavaScript語法。可以百度谷歌一下，下載該文件，也可以直接引用網(wǎng)上資源。然后就在html里面寫了一個script代碼塊： <script type="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語法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。 是不是已經(jīng)開放蒙圈了，剛才提了好幾個JSX，什么是JSX呢？React官方文檔里面的解釋是：XML語法內(nèi)部包含JavaScript被叫做JSX。但是我理解的應(yīng)該是我們直接在JS里面嵌入了HTML，這個就是React提出的叫做JSX的語法吧。這樣做的好處就是一個組件的開發(fā)過程中，HTML是必不可少的一部分，能夠?qū)TML封裝起來才是組件的完全體。JSX語法的產(chǎn)生，讓前端實(shí)現(xiàn)組件化成為了可能。 JSX的基本語法規(guī)則：遇到HTML標(biāo)簽(以<開頭)，就用HTML規(guī)則解析；遇到代碼塊(以{開頭)，就用JavaScript規(guī)則解析。 在ReactDOM.render里面寫了兩行，他們的作用就是將h1標(biāo)題插入example節(jié)點(diǎn)。 你也可以直接新建一個js文件，然后將body里script里面的代碼直接放到里面，我們可以命名為helloworld.js，然后在head里面導(dǎo)入即可。我比較傾向于這種做法，因?yàn)橹辽賖tml文件不會看著太大，而且方便引入管理。如果其他html也需要改代碼塊，直接引入即可。 ? 六、基礎(chǔ)語法介紹 1、ReactDOM.render( ) ReactDOM.render是React最基本的語法，用于將模板轉(zhuǎn)換成HTML語言，并插入指定的DOM節(jié)點(diǎn)。 ReactDOM.render(<h1>Hello,World!</h1>,document.getElementById('example')
); 運(yùn)行結(jié)果如下： 2、map（遍歷） 將數(shù)組中的元素遍歷賦值 var animals = ['dog','cat','pig'];
ReactDOM.render(<div>{animals.map(function(animal) {return <h1>{animal}</h1>})}</div>,document.getElementById('example')
); 從這里開始都是講React代碼放到了.js文件里面，然后在html文件里面引入。引入的時候記得寫type = ’text/babel’。這里會有一個小問題：打開瀏覽器的調(diào)試工具后，里面會看到Warning如下： Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div> 解決方法如下： var animals = ['dog','cat','pig'];
ReactDOM.render(<div>{animals.map(function(animal,key) {return <h1 key = {key}>{animal}</h1>})}</div>,document.getElementById('example')
); 警告的意思是最好給循環(huán)產(chǎn)生的child添加一個key。這樣就可以接觸警告了。運(yùn)行結(jié)果如下： 這里面你也許還會遇到另外一個問題，那就是用的Sublime Text，然后太瀏覽器打開的時候提示： browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource. 其實(shí)是因?yàn)槲覀儗s單獨(dú)拉出來文件導(dǎo)致的，但是你會發(fā)現(xiàn)如果使用Safari瀏覽器是沒有這個問題的。在這里找到了答案： startup chrome with --disable-web-security On Windows:chrome.exe --disable-web-securityOn Mac:open /Applications/Google\ Chrome.app/ --args --disable-web-security 因?yàn)镃hrome瀏覽器不支持本地ajax訪問。 你也可以構(gòu)建本地服務(wù)器進(jìn)行訪問，比如我使用的intellJ IDEA ，直接就是在本地構(gòu)建了一個本地服務(wù)，此時訪問地址為： http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html 而沒有構(gòu)建本地服務(wù)的時候訪問地址為： file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource. 其實(shí)是因?yàn)槲覀儗s單獨(dú)拉出來文件導(dǎo)致的，但是你會發(fā)現(xiàn)如果使用Safari瀏覽器是沒有這個問題的。在這里找到了答案： startup chrome with --disable-web-security On Windows:chrome.exe --disable-web-securityOn Mac:open /Applications/Google\ Chrome.app/ --args --disable-web-security 因?yàn)镃hrome瀏覽器不支持本地ajax訪問。 你也可以構(gòu)建本地服務(wù)器進(jìn)行訪問，比如我使用的intellJ IDEA ，直接就是在本地構(gòu)建了一個本地服務(wù)，此時訪問地址為： http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html 而沒有構(gòu)建本地服務(wù)的時候訪問地址為： file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
3、組件化
因?yàn)镽eact使用的是JSX，所以它允許將代碼封裝成組件（component），然后像普通的HTML標(biāo)簽一樣插入。 React.createClass方法就是用于生成一個組件類，比如： var ZGButton = React.createClass({render:function() {return <button>ZG{this.props.name}</button>} }); ReactDOM.render(<ZGButton name = 'Button1'/>,document.getElementById('example') ); 運(yùn)行結(jié)果如下： 上面的ZGButton就是一個組件類，模板插入<ZGButton />，會自動生成一個該組件的實(shí)例。 所有組件類都必須有自己的render方法，用于輸出組件。 現(xiàn)在代碼這樣寫： var zGButton = React.createClass({render:function() {return <button>ZG{this.props.name}</button>} }); ReactDOM.render(<zGButton name="Button2">Button</zGButton>,document.getElementById('example') ); 也就是將組件類的第一個字符小寫，然后在引用的時候發(fā)現(xiàn)現(xiàn)在是雙標(biāo)簽了（代碼自動填充的時候出現(xiàn)），而且name失效。因此我們在開發(fā)組件的時候一定要將第一個首字符大寫，否則將不會達(dá)到你想要的效果。 4、this.props.children this.props對象的屬性和組件的屬性一一對應(yīng)，但是有個children除外，它表示的是組件的所有子節(jié)點(diǎn)： var Students = React.createClass({render:function() {return (<ol>{React.Children.map(this.props.children,function(child) {return <li>{child}</li>})}</ol>);} }); ReactDOM.render(<Students><span>zhangsan</span><span>lisi</span></Students>,document.getElementById('example') ); 此時輸出的結(jié)果為： 5、PropTypes 組件就類似與我們OC開發(fā)或者Java開發(fā)中的類，類可以進(jìn)行屬性添加，組件也可以。 組件的屬性可以接受任意值，字符串、對象、函數(shù)都行。這里面有一個propTypes，可以用來限定提供的屬性是否滿足要求： var Student = React.createClass({propTypes: {myName:React.PropTypes.string.isRequired,},render:function() {return <h1>{this.props.myName}</h1>} }); var myNameStr = "React"; ReactDOM.render(<Student myName = {myNameStr} />,document.getElementById('example') ); 這里面的propTypes里面的是對屬性的限制，比如這里必須是string類型，值是必須的。我們還可以去設(shè)置默認(rèn)屬性值： var Student = React.createClass({getDefaultProps: function() {return {myName:"Default React"}},propTypes: {myName:React.PropTypes.string.isRequired,},render:function() {return <h1>{this.props.myName}</h1>} }); 這里面的getDefaultProps就類似與我們在開發(fā)iOS或者Java的時候?qū)β暶鲗傩缘臅r候進(jìn)行賦初始化值。 6、Virtual DOM 組件并不是真實(shí)的DOM節(jié)點(diǎn)，而是存在于內(nèi)存中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬DOM，只有插入文檔的時候才會變成真實(shí)的DOM。根據(jù)React的設(shè)計(jì)，當(dāng)重新渲染組件的時候，會通多diff尋找到變更的DOM節(jié)點(diǎn)，再把這個修改更新到瀏覽器實(shí)際的DOM節(jié)點(diǎn)上，所以實(shí)際上并不是渲染整個DOM數(shù)，這個Virtual DOM是一個純粹的JS數(shù)據(jù)結(jié)構(gòu)，性能比原生DOM快很多。這里面我們可以用通過ref屬性來獲取真實(shí)的DOM屬性： var MyComponment = React.createClass({render:function(){return (<div><input type = "text" ref = "myTextInput"/><input type = "button" value = "Focus the text input" onClick={this.handleClick}/></div>);},handleClick:function() {// alert(this.refs.myTextInput);this.refs.myTextInput.focus();} }); ReactDOM.render(<MyComponment/>,document.getElementById('example') ); 這里需要注意的是，因?yàn)槲覀兪褂玫氖钦鎸?shí)的DOM對象，所以一定要確保DOM插入文檔之后才能夠使用。 7、this.state 我們可以通過this.state來拿到組件的狀態(tài)： var LinkButton = React.createClass({getInitialState:function () {return {linked:false};},handleClick:function() {this.setState({linked:!this.state.linked});},render:function() {var text = this.state.linked? 'linked':'not linked';return (<p onClick={this.handleClick}>You {text} this. Click to toggle</p>);} }); ReactDOM.render(<LinkButton/>,document.getElementById('example') ); 這里面我設(shè)置了一個linked的狀態(tài)（是否連接）,這里通過this.state拿到當(dāng)前狀態(tài)，通過this.setState來設(shè)置狀態(tài)。 8、表單 表單填寫是用戶和組件的互動： var Form = React.createClass({getInitialState:function() {return {value:'Hello'};},handleChange:function(event) {this.setState({value:event.target.value});},render:function() {var value = this.state.value;return (<div><input type="text" value = {value} onChange={this.handleChange}/><p>{value}</p></div>);} }); ReactDOM.render(<Form/>,document.getElementById('example') ); 9、Component Lifecycle 組件有三個主要的生命周期： Mounting:組件插入到DOM Updating:組件被重新渲染，如果DOM需要更新 Unmounting:從DOM中刪除組件 React為每個狀態(tài)都提供了兩種處理函數(shù)，will函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did在進(jìn)入狀態(tài)之后調(diào)用。詳情可參見這里。 var MyButton = 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>);}, }); var LoadButton = React.createClass({loadMyButton:function() {ReactDOM.render(<MyButton/>,document.getElementById('myBTN'));},removeMyButton:function() {var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));console.log(result);},render:function() {return (<div><button onClick={this.removeMyButton}>卸載MyButton</button><button onClick={this.loadMyButton}>裝載MyButton</button><div id="myBTN">這里是mybuttonquyu</div></div>);} }); ReactDOM.render(<LoadButton/>,document.getElementById('example') ); 10、Ajax 組件的數(shù)據(jù)通常是通過Ajax請求服務(wù)器獲取的，可以使用componentDidMount方法來設(shè)置Ajax請求，等到請求成功，再用this.setState方法重新渲染UI: var UserGist = React.createClass({getInitialState:function() {return {username:'',lastGistUrl:''}},componentDidMount:function(){$.get(this.props.source,function(result){var lastGist = result[0];if (this.isMounted()) {this.setState({username:lastGist.owner.login,lastGistUrl:lastGist.html_url});}}.bind(this));},render:function() {return (<div>{this.state.username}'s last gist is<a href={this.state.lastGistUrl}>here</a></div>);} }); ReactDOM.render(<UserGist source = "https://api.github.com/users/octocat/gists"/>,document.getElementById('example') ); 這里使用了$,所以要引入jquery.js。 七、總結(jié) 經(jīng)過這兩天的了解，大概對React入門了。個人覺得React就是為了組件化開發(fā)方便而產(chǎn)生的。利用React，可以讓其充當(dāng)MVC中V的角色。也是對MVC架構(gòu)的輔助設(shè)計(jì)。 八、參考資料 1、阮一峰的博客 2、React官方文檔 3、React入門教程轉(zhuǎn)載于:https://www.cnblogs.com/zhanggui/p/5962037.html
總結(jié)
- 上一篇： Asp.Net Core 项目搭建 基础
- 下一篇： ...