如何在React中做到jQuery-free

前言

前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章，「如何做到 jQuery-free?」。这篇文章讨论的问题，在今天来看仍不过时，其中的一些点的讨论主要是面向新内核现代浏览器的标准 DOM API，很可惜的是在目前的开发环境下，我们仍然无法完全抛弃 IE，大部分情况下我们至少还要兼容到 IE 8，这一点使我们无法充分践行文章中提到的一些点，而本文也正是***启发，顺着阮老师文章的思路来讨论如何在 React 中实战 IE8-compatible 的 jQuery-free。

首先我们仍要说的是，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 势在必行。

下面就顺着阮老师当年的思路，来讨论如何使用 React 自带的强大功能，和一些良心第三方库屏蔽兼容性，来取代 jQuery 的主要功能，做到 jQuery-free。

(注：React 15.x 版本已经不再兼容 IE8，因此本文讨论的 React 仍是 0.14.x 的版本，同时为了易于理解，本文也基本上以 ES6 class 的方式来声明组件，而不采用 pure function。)

一、选取 DOM 元素

在 jQuery 中，我们已经熟悉了使用 sizzle 选择器来完成 DOM 元素的选取。而在 React 中，我们可以使用 ref 来更有针对性的获取元素。

 
 
  
  import React from 'react';   
  class Demo extends React.Compoent {   
     
      getDomNode() {   
          return this.refs.root; // 获取 Dom Node   
      }   
      render() {   
          return (   
              just a demo

);

}

这是最简单的获取 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 (   
                 
                  just a demo

import React from 'react';
import ReactDOM from 'react-dom';
class Sub extends React.Compoent {
render() {
return (
a sub component
);
}
}
class Demo extends React.Compoent {
getDomNode() {
return this.refs.root; // 获取 Dom Node
}
getSubNode() {
return ReactDOM.findDOMNode(this.refs.sub); // 获取子组件根节点
}
render() {
return (
);
}
}

import React from 'react';
import ReactDOM from 'react-dom';
class Sub extends React.Compoent {
getDomNode() {
return this.rootNode;
}
render() {
return (
this.rootNode = c}>a sub component
);
}
}
class Demo extends React.Compoent {
getDomNode() {
return this.rootNode; // 获取 Dom Node
}
getSubNode() {
return this.sub.getDomNode(); // 获取子组件根节点
}
render() {
return (
this.rootNode = c}>
this.sub = c} />
);
}
}

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 (
{this.state.list.map((item) =>
{item}
)}
尾部插入 Dom 元素
头部插入 Dom 元素
删除 Dom 元素
);
}
}

import React from 'react';
class Demo extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
alert('我是弹窗')；
}
render() {
return (
点击我弹出弹框
);
}
}

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

import React from 'react';
class Demo extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
doSomethingAfterRender(); // 在组件渲染完成后执行一些操作，如远程获取数据，检测 DOM 变化等。
}
render() {
return (
just a demo
);
}
}

import React from 'react';
class Demo extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.rootNode.scrollLeft = 10; // 渲染后将外层的滚动调至 10px
}
render() {
return (
ref={(c) => this.rootNode = c}
style={{ width: '100px', overflow: 'auto' }}
>
just a demo
);
}
}

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 (
跳转链接
获取链接
修改链接
);
}
}

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 (
href="//www.taobao.com"
className={classnames({
'fn-show': this.state.show,
'fn-hide': !this.state.show,
})}
>
跳转链接
改变现实状态
);
}
}

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 (
style={{
background: this.state.background,
}}
>
just a demo
);
}
}