前言
前些天在訂閱的公眾號(hào)中看到了以前阮一峰老師寫過的一篇文章，「如何做到 jQuery-free?」。這篇文章討論的問題，在今天來看仍不過時(shí)，其中的一些點(diǎn)的討論主要是面向新內(nèi)核現(xiàn)代瀏覽器的標(biāo)準(zhǔn) DOM API，很可惜的是在目前的開發(fā)環(huán)境下，我們?nèi)匀粺o法完全拋棄 IE，大部分情況下我們至少還要兼容到 IE 8，這一點(diǎn)使我們無法充分踐行文章中提到的一些點(diǎn)，而本文也正是首次啟發(fā)，順著阮老師文章的思路來討論如何在 React 中實(shí)戰(zhàn) IE8-compatible 的 jQuery-free。
首先我們?nèi)砸f的是，jQuery 是現(xiàn)在最流行的 JavaScript 工具庫。在 W3techs 的統(tǒng)計(jì)中，目前全世界 70.6% 的網(wǎng)站在使用他，而 React 甚至還不到 0.1%，但 React 一個(gè)值得注意的趨勢(shì)是，他在目前頂級(jí)流量網(wǎng)站中的使用率是最高的，比例達(dá)到了 16%。這一趨勢(shì)也表明了目前整個(gè)前端界的技術(shù)趨勢(shì)，但 70.6% 的數(shù)字也在告訴我們，jQuery 在 JS 庫中的王者地位，即使使用了React，也可能因?yàn)楦鞣N各樣的原因，還要和 jQuery 來配合使用。但 React 本身的體積已經(jīng)讓我們對(duì)任何一個(gè)重庫產(chǎn)生了不適反應(yīng)，為了兼容 IE8，我們?nèi)匀恍枰褂?1.x 的 jQuery 版本，但當(dāng)時(shí)設(shè)計(jì)上的缺陷使得我們無法像 lodash 那樣按需獲取。而 React 和 jsx 的強(qiáng)大，又使得我們不需要了 jQuery 的大部分功能。從這個(gè)角度來看，他臃腫的體積讓開發(fā)者更加難以忍受，jQuery-free 勢(shì)在必行。
下面就順著阮老師當(dāng)年的思路，來討論如何使用 React 自帶的強(qiáng)大功能，和一些良心第三方庫屏蔽兼容性，來取代 jQuery 的主要功能，做到 jQuery-free。
(注：React 15.x 版本已經(jīng)不再兼容 IE8，因此本文討論的 React 仍是 0.14.x 的版本，同時(shí)為了易于理解，本文也基本上以 ES6 class 的方式來聲明組件，而不采用 pure function。)
一、選取 DOM 元素
在 jQuery 中，我們已經(jīng)熟悉了使用 sizzle 選擇器來完成 DOM 元素的選取。而在 React 中，我們可以使用 ref 來更有針對(duì)性的獲取元素。
import?React?from ?'react' ;? class?Demo?extends?React.Compoent?{? ? ????getDomNode()?{? ????????return ?this.refs.root;?//?獲取?Dom?Node? ????}? ????render()?{? ????????return ?(? ????????????<div?ref="root" >just?a?demo</div>? ????????);? ????}? }? 這是最簡(jiǎn)單的獲取 node 的方式，如果有多層結(jié)構(gòu)嵌套呢?沒有關(guān)系。
import?React?from ?'react' ;? class?Demo?extends?React.Compoent?{? ? ????getRootNode()?{? ????????return ?this.refs.root;?//?獲取根節(jié)點(diǎn)?Dom?Node? ????}? ????getLeafNode()?{? ????????return ?this.refs.leaf;?//?獲取葉節(jié)點(diǎn)?Dom?Node? ????}? ????render()?{? ????????return ?(? ????????????<div?ref="root" >? ????????????????<div?ref="leaf" >just?a?demo</div>? ????????????</div>? ????????);? ????}? }? 如果是組件和組件嵌套呢?也沒關(guān)系，父組件仍然可以拿到子組件的根節(jié)點(diǎn)。
import?React?from ?'react' ;? import?ReactDOM?from ?'react-dom' ;? class?Sub?extends?React.Compoent?{? ????render()?{? ????????return ?(? ????????????<div>a?sub?component</div>? ????????);? ????}? }? class?Demo?extends?React.Compoent?{? ? ????getDomNode()?{? ????????return ?this.refs.root;?//?獲取?Dom?Node? ????}? ????? ????getSubNode()?{? ????????return ?ReactDOM.findDOMNode(this.refs.sub);?//?獲取子組件根節(jié)點(diǎn)? ????}? ????render()?{? ????????return ?(? ????????????<div?ref="root" >? ????????????????<Sub?ref="sub" ?/>? ????????????</div>? ????????);? ????}? }? 上面使用了比較易懂的 API 來解釋 Ref 的用法，但里面包含了一些現(xiàn)在 React 不太推薦和即將廢棄的方法，如果用 React 推薦的寫法，我們可以這樣寫。
import?React?from ?'react' ;? import?ReactDOM?from ?'react-dom' ;? class?Sub?extends?React.Compoent?{? ????getDomNode()?{? ????????return ?this.rootNode;? ????}? ????render()?{? ????????return ?(? ????????????<div?ref={(c)?=>?this.rootNode?=?c}>a?sub?component</div>? ????????);? ????}? }? class?Demo?extends?React.Compoent?{? ? ????getDomNode()?{? ????????return ?this.rootNode;?//?獲取?Dom?Node? ????}? ????? ????getSubNode()?{? ????????return ?this.sub.getDomNode();?//?獲取子組件根節(jié)點(diǎn)? ????}? ????render()?{? ????????return ?(? ????????????<div?ref={(c)?=>?this.rootNode?=?c}>? ????????????????<Sub?ref={(c)?=>?this.sub?=?c}?/>? ????????????</div>? ????????);? ????}? }? 有人可能會(huì)問，那子組件怎么拿父組件的 Dom Node 呢，從 React 的單向數(shù)據(jù)流角度出發(fā)，遇到這種情況我們應(yīng)該通過回調(diào)通知給父組件，再由父組件自行判斷如何修改 Node，其實(shí)父組件拿子組件的 Node 情況也很少，大多數(shù)情況下我們是通過 props 傳遞變化給子組件，獲取子組件 Node，更多的情況下是為了避開大量重新渲染去修改一些Node的屬性(比如 scrollLeft)。
二、DOM 操作
jQuery 中提供了豐富的操作方法，但一個(gè)個(gè)操作 DOM 元素有的時(shí)候真的很煩人并且容易出錯(cuò)。React 通過數(shù)據(jù)驅(qū)動(dòng)的思想，通過改變 view 對(duì)應(yīng)的數(shù)據(jù)，輕松實(shí)現(xiàn) DOM 的增刪操作。
class?Demo?extends?React.Compoent?{? ????constructor(props)?{? ????????super(props);? ????????this.state?=?{? ????????????list:?[1,?2,?3],? ????????}；? ????????this.addItemFromBottom?=?this.addItemFromBottom.bind(this);? ????????this.addItemFromTop?=?this.addItemFromTop.bind(this);? ????????this.deleteItem?=?this.deleteItem.bind(this);? ????}? ????? ????addItemFromBottom()?{? ????????this.setState({? ????????????list:?this.state.list.concat([4]),? ????????});? ????}? ????? ????addItemFromTop()?{? ????????this.setState({? ????????????list:?[0].concat(this.state.list),? ????????});? ????}? ????? ????deleteItem()?{? ????????const?newList?=?[...this.state.list];? ????????newList.pop();? ????????this.setState({? ????????????list:?newList,? ????????});? ????}? ????? ????render()?{? ????????return ?(? ????????????<div>? ????????????????{this.state.list.map((item)?=>?<div>{item}</div>)}? ????????????????<button?onClick={this.addItemFromBottom}>尾部插入?Dom?元素</button>? ????????????????<button?onClick={this.addItemFromTop}>頭部插入?Dom?元素</button>? ????????????????<button?onClick={this.deleteItem}>刪除?Dom?元素</button>? ????????????</div>? ????????);? ????}? }? 三、事件的監(jiān)聽
React 通過根節(jié)點(diǎn)代理的方式，實(shí)現(xiàn)了一套很優(yōu)雅的事件監(jiān)聽方案，在組件 unmount 時(shí)也不需要自己去處理內(nèi)存回收相關(guān)的問題，非常的方便。
import?React?from ?'react' ;? class?Demo?extends?React.Component?{? ????constructor(props)?{? ????????super(props);? ????????this.handleClick?=?this.handleClick.bind(this);? ????}? ????handleClick()?{? ????????alert('我是彈窗' )；? ????}? ????render()?{? ????????return ?(? ????????????<div?onClick={this.handleClick}>點(diǎn)擊我彈出彈框</div>? ????????);? ????}? }? 這里有一個(gè)小細(xì)節(jié)就是 bind 的時(shí)機(jī)，bind 是為了保持相應(yīng)函數(shù)的上下文，雖然也可以在 onClick 那里 bind，但這里選擇在 constructor 里 bind 是因?yàn)榍罢邥?huì)在每次 render 的時(shí)候都進(jìn)行一次 bind，返回一個(gè)新函數(shù)，是比較消耗性能的做法。
但 React 的事件監(jiān)聽，畢竟只能監(jiān)聽至 root component，而我們?cè)诤芏鄷r(shí)候要去監(jiān)聽 window/document 上的事件，如果 resize、scroll，還有一些 React 處理不好的事件，比如 scroll，這些都需要我們自己來解決。事件監(jiān)聽為了屏蔽差異性需要做很多的工作，這里像大家推薦一個(gè)第三方庫來完成這部分的工作，add-dom-event-listener，用法和原生的稍有區(qū)別，是因?yàn)檫@個(gè)庫并不旨在做 polyfill，但用法還是很簡(jiǎn)單。
var?addEventListener?=?require('add-dom-event-listener' );? var?handler?=?addEventListener(document.body,?'click' ,?function (e){? ??console.log(e.target);?//?works?for ?ie? ??console.log(e.nativeEvent);?//?native?dom?event? });? handler.remove();?//?detach?event?listener? 另一個(gè)選擇是 bean，達(dá)到了 IE6+ 級(jí)別的兼容性。
四、事件的觸發(fā)
和事件監(jiān)聽一樣，無論是 Dom 事件還是自定義事件，都有很優(yōu)秀的第三方庫幫我們?nèi)ヌ幚?#xff0c;如果是 DOM 事件，推薦 bean，如果是自定義事件的話，推薦 PubSubJS。
五、document.ready
React 作為一個(gè) view 層框架，通常情況下頁面只有一個(gè)用于渲染 React 頁面組件的根節(jié)點(diǎn) div，因此 document.ready，只需把腳本放在這個(gè) div 后面執(zhí)行即可。而對(duì)于渲染完成后的回調(diào)，我們可以使用 React 提供的 componentDidMount 生命周期。
import?React?from ?'react' ;? class?Demo?extends?React.Component?{? ????constructor(props)?{? ????????super(props);? ????}? ????? ????componentDidMount()?{? ????????doSomethingAfterRender();?//?在組件渲染完成后執(zhí)行一些操作，如遠(yuǎn)程獲取數(shù)據(jù)，檢測(cè)?DOM?變化等。? ????}? ????render()?{? ????????return ?(? ????????????<div>just?a?demo</div>? ????????);? ????}? }? 六、attr 方法
jQuery 使用 attr 方法，獲取 Dom 元素的屬性。在 React 中也可以配合 Ref 直接讀取 DOM 元素的屬性。
import?React?from ?'react' ;? class?Demo?extends?React.Component?{? ????constructor(props)?{? ????????super(props);? ????}? ????? ????componentDidMount()?{? ????????this.rootNode.scrollLeft?=?10;?//?渲染后將外層的滾動(dòng)調(diào)至?10px? ????}? ????render()?{? ????????return ?(? ????????????<div?? ????????????????ref={(c)?=>?this.rootNode?=?c}?? ????????????????style={{?width:?'100px' ,?overflow:?'auto' ?}}? ????????????>?? ????????????????<div?style={{?width:?'1000px' ?}}>just?a?demo</div>? ????????????</div>? ????????);? ????}? }? 但是，在大部分的情況下，我們完全不需要做，因?yàn)?React 的單向數(shù)據(jù)流和數(shù)據(jù)驅(qū)動(dòng)渲染，我們可以不通過 DOM，輕松拿到和修改大部分我們需要的 DOM 屬性。
import?React?from ?'react' ;? class?Demo?extends?React.Component?{? ????constructor(props)?{? ????????super(props);? ????????this.state?=?{? ????????????link:?'//www.taobao.com' ,? ????????};? ????????this.getLink?=?this.getLink.bind(this);? ????????this.editLink?=?this.editLink.bind(this);? ????}? ????? ????getLink()?{? ????????alert(this.state.link);? ????}? ????? ????editLink()?{? ????????this.setState({? ????????????link:?'//www.tmall.com' ,? ????????});? ????}? ????? ????render()?{? ????????return ?(? ????????????<div>? ????????????????<a?href={this.state.link}>跳轉(zhuǎn)鏈接</a>? ????????????????<button?onClick={this.getLink}>獲取鏈接</button>? ????????????????<button?onClick={this.editLink}>修改鏈接</button>? ????????????</div>? ????????);? ????}? ????? }? 七、addClass/removeClass/toggleClass
在 jQuery 的時(shí)代，我們通?？揩@取 Dom 元素后，再 addClass/removeClass 來改變外觀。在 React 中通過數(shù)據(jù)驅(qū)動(dòng)和第三庫classnames 修改樣式從未如此輕松。
.fn-show?{? ????display:?block;? }? .fn-hide?{? ????display:?none;? } import?React?from ?'react' ;? import?classnames?from ?'classnames' ;? class?Demo?extends?React.Component?{? ????constructor(props)?{? ????????super(props);? ????????this.state?=?{? ????????????show:?true ,? ????????};? ????????this.changeShow?=?this.changeShow.bind(this);? ????}? ????? ????changeShow()?{? ????????this.setState({? ????????????show:?!this.state.show,?? ????????});? ????}? ????? ????render()?{? ????????return ?(? ????????????<div>? ????????????????<a?? ????????????????????href="//www.taobao.com" ?? ????????????????????className={classnames({? ????????????????????????'fn-show' :?this.state.show,? ????????????????????????'fn-hide' :?!this.state.show,? ????????????????????})}? ????????????????>? ????????????????????跳轉(zhuǎn)鏈接? ????????????????</a>? ????????????????<button?onClick={this.changeShow}>改變現(xiàn)實(shí)狀態(tài)</button>? ????????????</div>? ????????);? ????}? ????? }? 八、css
jQuery 的 css 方法用于設(shè)置 DOM 元素的 style 屬性，在 React 中，我們可以直接設(shè)置 DOM 的 style 屬性，如果想改變，和上面的 class 一樣，用數(shù)據(jù)去驅(qū)動(dòng)。
import?React?from ?'react' ;? class?Demo?extends?React.Component?{? ????constructor()?{? ????????super(props);? ????????this.state?=?{? ????????????backgorund:?'white' ,? ????????};? ????????this.handleClick?=?this.handleClick.bind(this);? ????}? ????? ????handleClick()?{? ????????this.setState({? ????????????background:?'black' ,? ????????});? ????}? ????? ????render()?{? ????????return ?(? ????????????<div?? ????????????????style={{? ????????????????????background:?this.state.background,? ????????????????}}? ????????????>? ????????????????just?a?demo? ????????????????<button>change?Background?Color</button>? ????????????</div>? ????????);? ????}? }? 九、數(shù)據(jù)存儲(chǔ)
比起 jQuery，React 反而是更擅長(zhǎng)管理數(shù)據(jù)，我們沒有必要像 jQuery 時(shí)那樣將數(shù)據(jù)放進(jìn) Dom 元素的屬性里，而是利用 state 或者 內(nèi)部變量(this.xxx) 來保存，在整個(gè)生命周期，我們都可以拿到這些數(shù)據(jù)進(jìn)行比較和修改。
十、Ajax
Ajax 確實(shí)是在處理兼容性問題上一塊令人比較頭疼的地方，要兼容各種形式的 Xhr 不說，還有 jsonp 這個(gè)不屬于 ajax 的功能也要同時(shí)考慮，好在已經(jīng)有了很好的第三方庫幫我們解決了這個(gè)問題，這里向大家推薦 natty-fetch，一個(gè)兼容 IE8 的fetch 庫，在 API 設(shè)計(jì)上向 fetch 標(biāo)準(zhǔn)靠近，而又保留了和 jQuery 類似的接口，熟悉 $.ajax 應(yīng)該可以很快的上手。
十一、動(dòng)畫
React 在動(dòng)畫方面提供了一個(gè)插件 ReactCSSTransitionGroup，和它的低級(jí)版本 ReactTransitionGroup，注意這里的低級(jí)并不是退化版本，而是更加基礎(chǔ)的暴露更多 API 的版本。
這個(gè)插件的靈感來自于 Angular 的 ng-animate，在設(shè)計(jì)思路上也基本保持一致。通過指定 Transition 的類名，比如 example ，在元素進(jìn)場(chǎng)和退場(chǎng)的時(shí)候分別加上對(duì)應(yīng)的類名，以實(shí)現(xiàn) CSS3 動(dòng)畫。例如本例中，進(jìn)場(chǎng)會(huì)添加 example-enter 和 example-enter-active到對(duì)應(yīng)的元素 ，而在退場(chǎng) example-leave 和 example-leave-active 類名。當(dāng)然你也可以指定不同的進(jìn)場(chǎng)退場(chǎng)類名。而對(duì)應(yīng)入場(chǎng)，React 也區(qū)分了兩種類型，一種是 ReactCSSTransitionGroup 第一次渲染時(shí)(appear)，而另一種是 ReactCSSTransitionGroup 已經(jīng)渲染完成后，有新的元素插入進(jìn)來(enter)，這兩種進(jìn)場(chǎng)可以使用 prop 進(jìn)行單獨(dú)配置，禁止或者修改超時(shí)時(shí)長(zhǎng)。具體的例子，在上面給出的鏈接中有詳細(xì)的例子和說明，因此本文不再贅述。
但這個(gè)插件最多只提供了做動(dòng)畫的方案，如果我想在動(dòng)畫進(jìn)行的過程中做一些其他事情呢?他就無能為力了，這時(shí)候就輪到 ReactTransitionGroup 出場(chǎng)了。ReactTransitionGroup 為他包裹的動(dòng)畫元素提供了六種新的生命周期：componentWillAppear(callback), componentDidAppear(), componentWillEnter(callback), componentDidEnter(),componentWillLeave(callback), componentDidLeave()。這些 hook 可以幫助我們完成一些隨著動(dòng)畫進(jìn)行需要做的其他事。
但官方提供的插件有一個(gè)不足點(diǎn)，動(dòng)畫只是在進(jìn)場(chǎng)和出場(chǎng)時(shí)進(jìn)行的，如果我的組件不是 mount/unmount，而只是隱藏和顯示怎么辦?這里推薦一個(gè)第三方庫：rc-animate，從 API 設(shè)計(jì)上他基本上是延續(xù)了 ReactCSSTransitionGroup 的思路，但是通過引入 showProp這一屬性，使他可以 handle 組件顯示隱藏這一情況下的出入場(chǎng)動(dòng)畫(只要將組件關(guān)于 show/hide 的屬性傳給 showProp 即可)，同時(shí)這個(gè)庫也提供自己的 hook，來實(shí)現(xiàn) appear/enter/leave 時(shí)的回調(diào)。
如果你說我并不滿足只是進(jìn)場(chǎng)和出場(chǎng)動(dòng)畫，我要實(shí)現(xiàn)類似鼠標(biāo)拖動(dòng)時(shí)的實(shí)時(shí)動(dòng)畫，我需要的是一個(gè) js 動(dòng)畫庫，這里向大家推薦一個(gè)第三方庫：react-motion , react-motion 一個(gè)很大的特點(diǎn)是，有別以往使用貝塞爾曲線來定義動(dòng)畫節(jié)奏，引入了剛度和阻尼這些彈簧系數(shù)來定義動(dòng)畫，按照作者的說法，與其糾結(jié)動(dòng)畫時(shí)長(zhǎng)和很難掌握的貝塞爾表示法，通過不斷調(diào)整剛度和阻尼來調(diào)試出最想要的彈性效果才是最合理的。Readme 里提供了一系列的很炫的動(dòng)畫效果，比如這個(gè) draggable list。Motion 通過指定 defaultStyle、style，傳回給子組件正在變化中的 style，從而實(shí)現(xiàn) js 動(dòng)畫。
<Motion?defaultStyle={{x:?0}}?style={{x:?spring(10)}}>? ??{interpolatingStyle?=>?<div?style={interpolatingStyle}?/>}? </Motion>? 總結(jié)
本文的靈感來源于阮老師兩年前的文章，這篇的實(shí)戰(zhàn)意義更大于對(duì)未來技術(shù)的展望，希望能夠給各位正在使用 React 開發(fā)系統(tǒng)的同學(xué)們一點(diǎn)啟發(fā)。
作者：紅白
來源：51CTO
與50位技術(shù)專家面對(duì)面 20年技術(shù)見證，附贈(zèng)技術(shù)全景圖
總結(jié)
以上是生活随笔 為你收集整理的如何在React中做到jQuery-free 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
