如何在React中做到j(luò)Query-free

作者：紅白 2016-08-11 16:48:10

討論如何使用 React 自帶的強大功能，和一些良心第三方庫屏蔽兼容性，來取代 jQuery 的主要功能，做到 jQuery-free。在 jQuery 中，我們已經(jīng)熟悉了使用 sizzle 選擇器來完成 DOM 元素的選取。而在 React 中，我們可以使用 ref 來更有針對性的獲取元素。

前言

前些天在訂閱的公眾號中看到了以前阮一峰老師寫過的一篇文章，「如何做到 jQuery-free?」。這篇文章討論的問題，在今天來看仍不過時，其中的一些點的討論主要是面向新內(nèi)核現(xiàn)代瀏覽器的標(biāo)準(zhǔn) DOM API，很可惜的是在目前的開發(fā)環(huán)境下，我們?nèi)匀粺o法完全拋棄 IE，大部分情況下我們至少還要兼容到 IE 8，這一點使我們無法充分踐行文章中提到的一些點，而本文也正是***啟發(fā)，順著阮老師文章的思路來討論如何在 React 中實戰(zhàn) IE8-compatible 的 jQuery-free。

首先我們?nèi)砸f的是，jQuery 是現(xiàn)在***的 JavaScript 工具庫。在 W3techs 的統(tǒng)計中，目前全世界 70.6% 的網(wǎng)站在使用他，而 React 甚至還不到 0.1%，但 React 一個值得注意的趨勢是，他在目前***流量網(wǎng)站中的使用率是***的，比例達到了 16%。這一趨勢也表明了目前整個前端界的技術(shù)趨勢，但 70.6% 的數(shù)字也在告訴我們，jQuery 在 JS 庫中的王者地位，即使使用了React，也可能因為各種各樣的原因，還要和 jQuery 來配合使用。但 React 本身的體積已經(jīng)讓我們對任何一個重庫產(chǎn)生了不適反應(yīng)，為了兼容 IE8，我們?nèi)匀恍枰褂?1.x 的 jQuery 版本，但當(dāng)時設(shè)計上的缺陷使得我們無法像 lodash 那樣按需獲取。而 React 和 jsx 的強大，又使得我們不需要了 jQuery 的大部分功能。從這個角度來看，他臃腫的體積讓開發(fā)者更加難以忍受，jQuery-free 勢在必行。

下面就順著阮老師當(dāng)年的思路，來討論如何使用 React 自帶的強大功能，和一些良心第三方庫屏蔽兼容性，來取代 jQuery 的主要功能，做到 jQuery-free。

(注：React 15.x 版本已經(jīng)不再兼容 IE8，因此本文討論的 React 仍是 0.14.x 的版本，同時為了易于理解，本文也基本上以 ES6 class 的方式來聲明組件，而不采用 pure function。)

一、選取 DOM 元素

在 jQuery 中，我們已經(jīng)熟悉了使用 sizzle 選擇器來完成 DOM 元素的選取。而在 React 中，我們可以使用 ref 來更有針對性的獲取元素。

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> 
        ); 
    } 
}

這是最簡單的獲取 node 的方式，如果有多層結(jié)構(gòu)嵌套呢?沒有關(guān)系。

import React from 'react'; 
class Demo extends React.Compoent { 
 
    getRootNode() { 
        return this.refs.root; // 獲取根節(jié)點 Dom Node 
    } 
    getLeafNode() { 
        return this.refs.leaf; // 獲取葉節(jié)點 Dom Node 
    } 
    render() { 
        return ( 
            <div ref="root"> 
                <div ref="leaf">just a demo</div> 
            </div> 
        ); 
    } 
}

如果是組件和組件嵌套呢?也沒關(guān)系，父組件仍然可以拿到子組件的根節(jié)點。

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é)點 
    } 
    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é)點 
    } 
    render() { 
        return ( 
            <div ref={(c) => this.rootNode = c}> 
                <Sub ref={(c) => this.sub = c} /> 
            </div> 
        ); 
    } 
}

有人可能會問，那子組件怎么拿父組件的 Dom Node 呢，從 React 的單向數(shù)據(jù)流角度出發(fā)，遇到這種情況我們應(yīng)該通過回調(diào)通知給父組件，再由父組件自行判斷如何修改 Node，其實父組件拿子組件的 Node 情況也很少，大多數(shù)情況下我們是通過 props 傳遞變化給子組件，獲取子組件 Node，更多的情況下是為了避開大量重新渲染去修改一些Node的屬性(比如 scrollLeft)。

二、DOM 操作

jQuery 中提供了豐富的操作方法，但一個個操作 DOM 元素有的時候真的很煩人并且容易出錯。React 通過數(shù)據(jù)驅(qū)動的思想，通過改變 view 對應(yīng)的數(shù)據(jù)，輕松實現(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é)點代理的方式，實現(xiàn)了一套很優(yōu)雅的事件監(jiān)聽方案，在組件 unmount 時也不需要自己去處理內(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}>點擊我彈出彈框</div> 
        ); 
    } 
}

這里有一個小細節(jié)就是 bind 的時機，bind 是為了保持相應(yīng)函數(shù)的上下文，雖然也可以在 onClick 那里 bind，但這里選擇在 constructor 里 bind 是因為前者會在每次 render 的時候都進行一次 bind，返回一個新函數(shù)，是比較消耗性能的做法。

但 React 的事件監(jiān)聽，畢竟只能監(jiān)聽至 root component，而我們在很多時候要去監(jiān)聽 window/document 上的事件，如果 resize、scroll，還有一些 React 處理不好的事件，比如 scroll，這些都需要我們自己來解決。事件監(jiān)聽為了屏蔽差異性需要做很多的工作，這里像大家推薦一個第三方庫來完成這部分的工作，add-dom-event-listener，用法和原生的稍有區(qū)別，是因為這個庫并不旨在做 polyfill，但用法還是很簡單。

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

另一個選擇是 bean，達到了 IE6+ 級別的兼容性。

四、事件的觸發(fā)

和事件監(jiān)聽一樣，無論是 Dom 事件還是自定義事件，都有很優(yōu)秀的第三方庫幫我們?nèi)ヌ幚恚绻?DOM 事件，推薦 bean，如果是自定義事件的話，推薦 PubSubJS。

五、document.ready

React 作為一個 view 層框架，通常情況下頁面只有一個用于渲染 React 頁面組件的根節(jié)點 div，因此 document.ready，只需把腳本放在這個 div 后面執(zhí)行即可。而對于渲染完成后的回調(diào)，我們可以使用 React 提供的 componentDidMount 生命周期。

import React from 'react'; 
class Demo extends React.Component { 
    constructor(props) { 
        super(props); 
    } 
     
    componentDidMount() { 
        doSomethingAfterRender(); // 在組件渲染完成后執(zhí)行一些操作，如遠程獲取數(shù)據(jù)，檢測 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; // 渲染后將外層的滾動調(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> 
        ); 
    } 
}

但是，在大部分的情況下，我們完全不需要做，因為 React 的單向數(shù)據(jù)流和數(shù)據(jù)驅(qū)動渲染，我們可以不通過 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 的時代，我們通常靠獲取 Dom 元素后，再 addClass/removeClass 來改變外觀。在 React 中通過數(shù)據(jù)驅(qū)動和第三庫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)實狀態(tài)</button> 
            </div> 
        ); 
    } 
     
}

八、css

jQuery 的 css 方法用于設(shè)置 DOM 元素的 style 屬性，在 React 中，我們可以直接設(shè)置 DOM 的 style 屬性，如果想改變，和上面的 class 一樣，用數(shù)據(jù)去驅(qū)動。

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ù)存儲

比起 jQuery，React 反而是更擅長管理數(shù)據(jù)，我們沒有必要像 jQuery 時那樣將數(shù)據(jù)放進 Dom 元素的屬性里，而是利用 state 或者內(nèi)部變量(this.xxx) 來保存，在整個生命周期，我們都可以拿到這些數(shù)據(jù)進行比較和修改。

十、Ajax

Ajax 確實是在處理兼容性問題上一塊令人比較頭疼的地方，要兼容各種形式的 Xhr 不說，還有 jsonp 這個不屬于 ajax 的功能也要同時考慮，好在已經(jīng)有了很好的第三方庫幫我們解決了這個問題，這里向大家推薦 natty-fetch，一個兼容 IE8 的fetch 庫，在 API 設(shè)計上向 fetch 標(biāo)準(zhǔn)靠近，而又保留了和 jQuery 類似的接口，熟悉 $.ajax 應(yīng)該可以很快的上手。

十一、動畫

React 在動畫方面提供了一個插件 ReactCSSTransitionGroup，和它的低級版本 ReactTransitionGroup，注意這里的低級并不是退化版本，而是更加基礎(chǔ)的暴露更多 API 的版本。

這個插件的靈感來自于 Angular 的 ng-animate，在設(shè)計思路上也基本保持一致。通過指定 Transition 的類名，比如 example ，在元素進場和退場的時候分別加上對應(yīng)的類名，以實現(xiàn) CSS3 動畫。例如本例中，進場會添加 example-enter 和 example-enter-active到對應(yīng)的元素，而在退場 example-leave 和 example-leave-active 類名。當(dāng)然你也可以指定不同的進場退場類名。而對應(yīng)入場，React 也區(qū)分了兩種類型，一種是 ReactCSSTransitionGroup ***次渲染時(appear)，而另一種是 ReactCSSTransitionGroup 已經(jīng)渲染完成后，有新的元素插入進來(enter)，這兩種進場可以使用 prop 進行單獨配置，禁止或者修改超時時長。具體的例子，在上面給出的鏈接中有詳細的例子和說明，因此本文不再贅述。

但這個插件最多只提供了做動畫的方案，如果我想在動畫進行的過程中做一些其他事情呢?他就無能為力了，這時候就輪到 ReactTransitionGroup 出場了。ReactTransitionGroup 為他包裹的動畫元素提供了六種新的生命周期：componentWillAppear(callback), componentDidAppear(), componentWillEnter(callback), componentDidEnter(),componentWillLeave(callback), componentDidLeave()。這些 hook 可以幫助我們完成一些隨著動畫進行需要做的其他事。

但官方提供的插件有一個不足點，動畫只是在進場和出場時進行的，如果我的組件不是 mount/unmount，而只是隱藏和顯示怎么辦?這里推薦一個第三方庫：rc-animate，從 API 設(shè)計上他基本上是延續(xù)了 ReactCSSTransitionGroup 的思路，但是通過引入 showProp這一屬性，使他可以 handle 組件顯示隱藏這一情況下的出入場動畫(只要將組件關(guān)于 show/hide 的屬性傳給 showProp 即可)，同時這個庫也提供自己的 hook，來實現(xiàn) appear/enter/leave 時的回調(diào)。

如果你說我并不滿足只是進場和出場動畫，我要實現(xiàn)類似鼠標(biāo)拖動時的實時動畫，我需要的是一個 js 動畫庫，這里向大家推薦一個第三方庫：react-motion , react-motion 一個很大的特點是，有別以往使用貝塞爾曲線來定義動畫節(jié)奏，引入了剛度和阻尼這些彈簧系數(shù)來定義動畫，按照作者的說法，與其糾結(jié)動畫時長和很難掌握的貝塞爾表示法，通過不斷調(diào)整剛度和阻尼來調(diào)試出最想要的彈性效果才是最合理的。Readme 里提供了一系列的很炫的動畫效果，比如這個 draggable list。Motion 通過指定 defaultStyle、style，傳回給子組件正在變化中的 style，從而實現(xiàn) js 動畫。

<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> 
  {interpolatingStyle => <div style={interpolatingStyle} />} 
</Motion>

總結(jié)

本文的靈感來源于阮老師兩年前的文章，這篇的實戰(zhàn)意義更大于對未來技術(shù)的展望，希望能夠給各位正在使用 React 開發(fā)系統(tǒng)的同學(xué)們一點啟發(fā)。

責(zé)任編輯：龐桂玉來源： segmentfault