如何在 React 中作到 jQuery-free

時間  2019-11-06
標籤 如何 react 作到 jquery free 欄目 React 简体版
原文   原文鏈接

前言

前些天在訂閱的公衆號中看到了之前阮一峯老師寫過的一篇文章，「如何作到 jQuery-free？」。這篇文章討論的問題，在今天來看仍不過期，其中的一些點的討論主要是面向新內核現代瀏覽器的標準 DOM API，很惋惜的是在目前的開發環境下，咱們仍然沒法徹底拋棄 IE，大部分狀況下咱們至少還要兼容到 IE 8，這一點使咱們沒法充分踐行文章中提到的一些點，而本文也正是首次啓發，順着阮老師文章的思路來討論如何在 React 中實戰 IE8-compatible 的 jQuery-free。javascript

首先咱們仍要說的是，jQuery 是如今最流行的 JavaScript 工具庫。在 W3techs 的統計中，目前全世界 70.6% 的網站在使用他，而 React 甚至還不到 0.1%，但 React 一個值得注意的趨勢是，他在目前頂級流量網站中的使用率是最高的，比例達到了 16%。這一趨勢也代表了目前整個前端界的技術趨勢，但 70.6% 的數字也在告訴咱們，jQuery 在 JS 庫中的王者地位，即便使用了React，也可能由於各類各樣的緣由，還要和 jQuery 來配合使用。但 React 自己的體積已經讓咱們對任何一個重庫產生了不適反應，爲了兼容 IE8，咱們仍然須要使用 1.x 的 jQuery 版本，但當時設計上的缺陷使得咱們沒法像 lodash 那樣按需獲取。而 React 和 jsx 的強大，又使得咱們不須要了 jQuery 的大部分功能。從這個角度來看，他臃腫的體積讓開發者更加難以忍受，jQuery-free 勢在必行。css

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

（注：React 15.x 版本已經再也不兼容 IE8，所以本文討論的 React 還是 0.14.x 的版本，同時爲了易於理解，本文也基本上以 ES6 class 的方式來聲明組件，而不採用 pure function。）前端

1、選取 DOM 元素

在 jQuery 中，咱們已經熟悉了使用 sizzle 選擇器來完成 DOM 元素的選取。而在 React 中，咱們可使用 ref 來更有針對性的獲取元素。java

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 的方式，若是有多層結構嵌套呢？沒有關係。node

import React from 'react';
class Demo extends React.Compoent {

    getRootNode() {
        return this.refs.root; // 獲取根節點 Dom Node
    }
    getLeafNode() {
        return this.refs.leaf; // 獲取葉節點 Dom Node
    }
    render() {
        return (
            <div ref="root">
                <div ref="leaf">just a demo</div>
            </div>
        );
    }
}

若是是組件和組件嵌套呢？也不要緊，父組件仍然能夠拿到子組件的根節點。react

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); // 獲取子組件根節點
    }
    render() {
        return (
            <div ref="root">
                <Sub ref="sub" />
            </div>
        );
    }
}

上面使用了比較易懂的 API 來解釋 Ref 的用法，但裏面包含了一些如今 React 不太推薦和即將廢棄的方法，若是用 React 推薦的寫法，咱們能夠這樣寫。jquery

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(); // 獲取子組件根節點
    }
    render() {
        return (
            <div ref={(c) => this.rootNode = c}>
                <Sub ref={(c) => this.sub = c} />
            </div>
        );
    }
}

有人可能會問，那子組件怎麼拿父組件的 Dom Node 呢，從 React 的單向數據流角度出發，遇到這種狀況咱們應該經過回調通知給父組件，再由父組件自行判斷如何修改 Node，其實父組件拿子組件的 Node 狀況也不多，大多數狀況下咱們是經過 props 傳遞變化給子組件，獲取子組件 Node，更多的狀況下是爲了避開大量從新渲染去修改一些Node的屬性（好比 scrollLeft）。git

2、DOM 操做

jQuery 中提供了豐富的操做方法，但一個個操做 DOM 元素有的時候真的很煩人而且容易出錯。React 經過數據驅動的思想，經過改變 view 對應的數據，輕鬆實現 DOM 的增刪操做。github

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

3、事件的監聽

React 經過根節點代理的方式，實現了一套很優雅的事件監聽方案，在組件 unmount 時也不須要本身去處理內存回收相關的問題，很是的方便。

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

這裏有一個小細節就是 bind 的時機，bind 是爲了保持相應函數的上下文，雖然也能夠在 onClick 那裏 bind，但這裏選擇在 constructor 裏 bind 是由於前者會在每次 render 的時候都進行一次 bind，返回一個新函數，是比較消耗性能的作法。

但 React 的事件監聽，畢竟只能監聽至 root component，而咱們在不少時候要去監聽 window/document 上的事件，若是 resize、scroll，還有一些 React 處理很差的事件，好比 scroll，這些都須要咱們本身來解決。事件監聽爲了屏蔽差別性須要作不少的工做，這裏像你們推薦一個第三方庫來完成這部分的工做，add-dom-event-listener，用法和原生的稍有區別，是由於這個庫並不旨在作 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+ 級別的兼容性。

4、事件的觸發

和事件監聽同樣，不管是 Dom 事件仍是自定義事件，都有很優秀的第三方庫幫咱們去處理，若是是 DOM 事件，推薦 bean，若是是自定義事件的話，推薦 PubSubJS。

5、document.ready

React 做爲一個 view 層框架，一般狀況下頁面只有一個用於渲染 React 頁面組件的根節點 div，所以 document.ready，只需把腳本放在這個 div 後面執行便可。而對於渲染完成後的回調，咱們可使用 React 提供的 componentDidMount 生命週期。

import React from 'react';
class Demo extends React.Component {
    constructor(props) {
        super(props);
    }
    
    componentDidMount() {
        doSomethingAfterRender(); // 在組件渲染完成後執行一些操做，如遠程獲取數據，檢測 DOM 變化等。
    }
    render() {
        return (
            <div>just a demo</div>
        );
    }
}

6、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; // 渲染後將外層的滾動調至 10px
    }
    render() {
        return (
            <div 
                ref={(c) => this.rootNode = c} 
                style={{ width: '100px', overflow: 'auto' }}
            > 
                <div style={{ width: '1000px' }}>just a demo</div>
            </div>
        );
    }
}

可是，在大部分的狀況下，咱們徹底不須要作，由於 React 的單向數據流和數據驅動渲染，咱們能夠不經過 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}>跳轉連接</a>
                <button onClick={this.getLink}>獲取連接</button>
                <button onClick={this.editLink}>修改連接</button>
            </div>
        );
    }
    
}

7、addClass/removeClass/toggleClass

在 jQuery 的時代，咱們一般靠獲取 Dom 元素後，再 addClass/removeClass 來改變外觀。在 React 中經過數據驅動和第三庫 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,
                    })}
                >
                    跳轉連接
                </a>
                <button onClick={this.changeShow}>改變現實狀態</button>
            </div>
        );
    }
    
}

8、css

jQuery 的 css 方法用於設置 DOM 元素的 style 屬性，在 React 中，咱們能夠直接設置 DOM 的 style 屬性，若是想改變，和上面的 class 同樣，用數據去驅動。

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

9、數據存儲

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

10、Ajax

Ajax 確實是在處理兼容性問題上一塊使人比較頭疼的地方，要兼容各類形式的 Xhr 不說，還有 jsonp 這個不屬於 ajax 的功能也要同時考慮，好在已經有了很好的第三方庫幫咱們解決了這個問題，這裏向你們推薦 natty-fetch，一個兼容 IE8 的fetch 庫，在 API 設計上向 fetch 標準靠近，而又保留了和 jQuery 相似的接口，熟悉 $.ajax 應該能夠很快的上手。

11、動畫

React 在動畫方面提供了一個插件 ReactCSSTransitionGroup，和它的低級版本 ReactTransitionGroup，注意這裏的低級並非退化版本，而是更加基礎的暴露更多 API 的版本。
這個插件的靈感來自於 Angular 的 ng-animate，在設計思路上也基本保持一致。經過指定 Transition 的類名，好比 example ，在元素進場和退場的時候分別加上對應的類名，以實現 CSS3 動畫。例如本例中，進場會添加 example-enter 和 example-enter-active 到對應的元素 ，而在退場 example-leave 和 example-leave-active 類名。固然你也能夠指定不一樣的進場退場類名。而對應入場，React 也區分了兩種類型，一種是 ReactCSSTransitionGroup 第一次渲染時(appear)，而另外一種是 ReactCSSTransitionGroup 已經渲染完成後，有新的元素插入進來(enter)，這兩種進場可使用 prop 進行單獨配置，禁止或者修改超時時長。具體的例子，在上面給出的連接中有詳細的例子和說明，所以本文再也不贅述。

但這個插件最多隻提供了作動畫的方案，若是我想在動畫進行的過程當中作一些其餘事情呢？他就無能爲力了，這時候就輪到 ReactTransitionGroup 出場了。ReactTransitionGroup 爲他包裹的動畫元素提供了六種新的生命週期：componentWillAppear(callback), componentDidAppear(), componentWillEnter(callback), componentDidEnter(), componentWillLeave(callback), componentDidLeave()。這些 hook 能夠幫助咱們完成一些隨着動畫進行須要作的其餘事。

但官方提供的插件有一個不足點，動畫只是在進場和出場時進行的，若是個人組件不是 mount/unmount，而只是隱藏和顯示怎麼辦？這裏推薦一個第三方庫：rc-animate，從 API 設計上他基本上是延續了 ReactCSSTransitionGroup 的思路，可是經過引入 showProp 這一屬性，使他能夠 handle 組件顯示隱藏這一狀況下的出入場動畫（只要將組件關於 show/hide 的屬性傳給 showProp 便可），同時這個庫也提供本身的 hook，來實現 appear/enter/leave 時的回調。

若是你說我並不知足只是進場和出場動畫，我要實現相似鼠標拖動時的實時動畫，我須要的是一個 js 動畫庫，這裏向你們推薦一個第三方庫：react-motion , react-motion 一個很大的特色是，有別以往使用貝塞爾曲線來定義動畫節奏，引入了剛度和阻尼這些彈簧係數來定義動畫，按照做者的說法，與其糾結動畫時長和很難掌握的貝塞爾表示法，經過不斷調整剛度和阻尼來調試出最想要的彈性效果纔是最合理的。Readme 裏提供了一系列的很炫的動畫效果，好比這個 draggable list。Motion 經過指定 defaultStyle、style，傳回給子組件正在變化中的 style，從而實現 js 動畫。

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

總結

本文的靈感來源於阮老師兩年前的文章，這篇的實戰意義更大於對將來技術的展望，但願可以給各位正在使用 React 開發系統的同窗們一點啓發。

參考連接

最後

慣例地來宣傳一下團隊開源的 React PC 組件庫 UXCore ，上面提到的點，在咱們的組件優化過程當中(如 table)都有體現，歡迎你們一塊兒討論，也歡迎在咱們的 SegmentFault 專題下進行提問討論。

uxcore

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程