基本知識點 · 前端工程化指南

[TOC] ## 前言本教程將細致的講解react中所有可能用到的基礎知識點。 ## jsx ### 基本了解 React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。我們不需要一定使用 JSX，但它有以下優點： * JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。 * 它是類型安全的，在編譯過程中就能發現錯誤。 * 使用 JSX 編寫模板更加簡單快速。 ### 基本使用我們需要一個根元素包過它，同時需要在外部一個元素來插入這個元素。 ~~~ ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); ~~~ ### 單獨的文件你可以在需要的時候把這個dom模板的部分單獨放一個文件，hello.js,然后再需要的時候引入這個文件。 ~~~ ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); ~~~ ~~~ <body> <div id="example"></div> <script type="text/babel" src="hello.js"></script> </body> ~~~ ### 注意事項你可以在其中使用表達式，但是不能寫if else語句 ### 樣式你可以通過變量的方式寫樣式代碼，不過這種一般使用不多，大多數還是寫在單獨的樣式文件，這種方式一般是需要交互邏輯或者接口結果改變樣式需求的時候這樣子寫。 ~~~ var myStyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <h1 style = {myStyle}>菜鳥教程</h1>, document.getElementById('example') ); ~~~ ### 注釋注釋需要寫在花括號中，實例如下： ~~~ <h1>菜鳥教程</h1> {/*注釋...*/} ~~~ ### 對數組的支持支持數組的默認展開，不需要額外的去遍歷。 ~~~ var arr = [ <h1>菜鳥教程</h1>, <h2>學的不僅是技術，更是夢想！</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); ~~~ ### h5標簽&&react標簽要渲染 HTML 標簽，只需在 JSX 里使用小寫字母的標簽名。 ~~~ var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example')); ~~~ 要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。 ~~~ var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example')); ~~~ ### 使用js表達式你可以在任何需要的jsx文檔中使用js的表達式，表達式要寫在大括號中 `const ele=<div>{1+2}rem</div>` ### jsx的屬性屬性中的字符串值用雙引號，屬性中變量也是用{},屬性中的名字要用駝峰，比如onClick,className,tabIndex ### jsx的嵌套同html一樣，jsx也支持元素嵌套。如果的你的標簽是閉合的，結尾用/結束 ~~~ const dialog=<img src={img.url}/> const ele=( <div> <h1></h1> <ul> </ul> </div> ) ~~~ ## 元素渲染 ### 基本元素渲染 render（）方法會渲染一個基本的react元素，如果你覺得它不方便使用，你可以定義為變量。 ~~~ const div=<div>hello world </div> ReactDom.render(div,mountNode) ~~~ ### react只會更新變化的部分 ### 可以通過多次調用react組件實現基本的更新 ## 組件&&props ### 基本使用通過creatClass創建類，如果我們需要傳遞數據，通過this.props 對象傳遞.（組件的第一個字母必須大寫） > 注意事項：在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。 ~~~ function Welcome(props) { return <h1>Hello, {props.name}</h1>; } var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！{{this.props.name}}</h1>; } }); ReactDOM.render( <HelloMessage name='zhangsan' />, document.getElementById('example') ); ~~~ ### 復合組件我們可以通過創建多個組件來合成一個組件，即把組件的不同功能點進行分離。組件名不一定是用單標簽，也可以是雙標簽。（xml的特點是有且只有一個根節點） ~~~ var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="菜鳥教程" site=" http://www.runoob.com" />, document.getElementById('example') ); ~~~ ## 事件處理 ### 寫法 react中的事件必須使用駝峰，并且申明的事件需要this申明，并且如果es6的方式需要申明綁定 ~~~ handleClick(){ } constructor(props){ super(props); this.handleClick=this.handleClick.bind(this); } render (){ return ( <button onClick={this.handleClick}></button> ) } ~~~ ### 阻止默認事件 ~~~ handleClick(e){ e.preventDefault() } ~~~ ### 改變組件狀態 ~~~ handleClick(e){ this.setState({ value :e.target.value }) } ~~~ ### 事件中你可以寫箭頭函數,可以支持傳入參數，定義函數時事件函數是在末尾的 ~~~ handleClick(name,e){ console.log(name) } <button onClick={(e)=>this.handleClick(e)}></button> <button onClick={(e)=>this.handleClick(name,e)}></button> ~~~ ## 條件渲染 ### 你可以根據某些條件來完成條件渲染一般是根據state進行的，甚至你可以控制返回不同的元素 ~~~ class Toggle extend React.Component{ constructor (props){ super(props); this.state={isLike:false} } render (){ var text =this.state.isLike?true:false; if(text){ return <span>喜歡很多，喜歡周杰倫</span> }else{ return <span>不喜歡，</span> } } } ~~~ ### 與運算符你可以通過與運算符來決定某個元素是否顯示 ~~~ render (){ var text =this.state.isLike?true:false; return （ { text && <span>喜歡</span>} ） } } ~~~ ### 三目渲染，做判斷然后根據條件進行選擇性的渲染 ~~~ render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div> ); } ~~~ ### 阻止組件渲染主要是通過沒有某個屬性或者屬性不符合需求的時候返回null實現不渲染的 ~~~ class Title extends Component{ render (){ if(!this.props.warn){ return null; } return ( <span>{this.props.warn}</span> ) } } ~~~ ### 組件Api 在之前的知識中，我們改變組件狀態都通過setState()的方式實現。下面我們詳細講解它提供了那些方式可以實現組件的一些狀態更改。 - 設置狀態setState({}) setState(object nextState[, function callback]),在這個的使用中可以使用兩個函數，前面的函數中可以帶入setState,會自帶當前state的所有參數。后面的回調函數會在設置狀態并且渲染成功后執行結果（可選參數）。 ~~~ tchange(){ this.setState(function(state){ return {text:state.text} }),console.log(1) } ~~~ - 設置屬性 setProps() setProps(object nextProps[, function callback]) props相當于組件的數據流，它總是會從父組件向下傳遞至所有的子組件中。當和一個外部的JavaScript應用集成時，我們可能會需要向組件傳遞數據或通知React.render()組件需要重新渲染，可以使用setProps()。更新組件，我可以在節點上再次調用React.render()，也可以通過setProps()方法改變組件屬性，觸發組件重新渲染。 - 替換屬性 replaceProps() replaceProps(object nextProps[, function callback]) replaceProps()方法與setProps類似，但它會刪除原有props - 獲取dom節點 findDOMNode() 可以用來獲取一些dom節點的字段和一些簡單的操作，前提是dom已經被渲染到頁面中。使用方式：（屬于reactdom的方法） ~~~ var reactEle = ReactDOM.render( <App>itbilu.com</App>, document.getElementById('example') ); var element = ReactDOM.findDOMNode(reactEle); ~~~ - 判斷組件掛載狀態 isMounted 用來判斷組件是否渲染，避免一些異步渲染數據的錯誤 ## 列表&&keys ### 渲染列表元素一般是通過map遍歷來實現渲染列表組件的,其中建議key要添加一下，且兄弟節點的key是不同的。 ~~~ const numbers=[1,2,2,5] render(){ return ( {numbers.map((number)=> <li key={number.toString()}>{number}</li> )} ) } ~~~ ## 表單 ### 受控組件在react中，所以的表單組件的值不能直接獲取和更改，而是要相應的狀態去更改對應的值，在這個事件中，你可以對值進行對應的驗證和判斷，如果你針對多個控件綁定了同一個事件，你可以用e.tatget.name來進行區分，做什么處理。 ### 非受控組件如果你覺得上面的方法比較麻煩，可以通過非受控組件完成輸入框的即時更改，這時與vue的v-model以及data比較類似.同樣你可以設置默認值.這里的input是整個控件中可訪問的。 `<input name=name ref={(input)=>this.input=input} defaultValue="name">` ## 狀態提升 ### 單組件提升父組件在某些組件中，可能需要公用一些數據，我們建議吧這些需要的數據放進最近的父組件中統一管理和使用，稱為狀態提升。 ~~~ class Title extends Component{ render (){ if(!this.props.warn){ return null; } return ( <span>{this.props.warn}</span> ) } } class App extends Component{ change() { this.setState( {warn:this.warn.value} ) } render(){ return（自定義警告內容：<input name="warn" ref={(input)=>this.warn=input}/><button type="submit" onClick={this.change}>提交</button> <Title warn={this.state.warn}/>） } } ~~~ ### 多子組件共享父組件假設在下面的組件中，我們可以實現人民幣以美元之間的互相轉換，且其中一種的輸入會影響另一個的顯示，我們將他們的值以及影響的事件都托管在父組件中。 ~~~ class CMoney extends Component{ render (){ return ( <input value={this.props.money} onChange={this.props.change}/> ) } } class AMoney extends Component{ render (){ return ( <input value={this.props.money} onChange={this.props.change}/> ) } } class Money extends Component{ constructor(props){ super(props); this.state={amoney:'0',cmoney:'0'} this.achange=this.achange.bind(this); this.cchange=this.cchange.bind(this) } achange(e) { this.setState( { cmoney:e.target.value*7, amoney:e.target.value } ) } cchange(e) { this.setState( { cmoney:e.target.value, amoney:(e.target.value)/7 } ) } render(){ return （ c:<CMoney money={this.state.cmoney} change={this.cchange}/> a:<AMoney money={this.state.amoney} change={this.achange}/> ） } ~~~ ### 數據修改 - 直接修改數據直接修改數據，如果是簡單類型沒什么問題，但是復雜數據比如對象類型的，直接修改會導致一些問題，這時候建議是用對象復制的方式。這樣的好處是保留了原來的數據。 ~~~ var player={name:'張三'，score:20} player.score=21; var newPlayer=Object.assign({},player,{score:21}) ~~~ - 提供歷史記錄有的時候也許你需要提供用戶的歷史操作，那么你需要根據用戶的每一步操作記錄一些基本數據，然后根據每一步的操作不同，增加歷史記錄數據，當需要的時候返回到對應的操作即可，渲染的時候總是渲染到最新的數組數據。當然你也可以指定為跳轉到指定步驟，這個主要取決于你渲染時選擇的數據是什么。 ~~~ //增加步驟 this.setState({ history: history.concat([{ squares: squares }]), //回到某個歷史記錄 //渲染最新的數據信息 const history = this.state.history; const current = history[history.length - 1]; //跳轉到指定的步驟刪除其他步驟 jumpTo(move){ this.setState({ history:this.state.history.clice(move+1)}) } ~~~ ## 組合與繼承 ### 組件的嵌套一些組件不能提前知道他們的子組件時什么，此時可能的做法是通過props.children來控制支持其子組件的顯示。比如對話框，邊框等都不能完全確認子組件是什么，他們更像是容器組件，但需要預留出放子組件的部分，也就是這部分的設計思路。