怎么在React中做到jQuery-free-重庆大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么在React中做到jQuery-free

这篇文章主要介绍怎么在React中做到jQuery-free，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

10余年的东宝网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整东宝建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“东宝网站设计”,“东宝网站推广”以来，每个客户项目都认真落实执行。

前言

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

一、选取 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 (

); } }

上面使用了比较易懂的 API 来解释 Ref 的用法，但里面包含了一些现在 React 不太推荐和即将废弃的方法，如果用 React 推荐的写法，我们可以这样写。

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} />

); } }

有人可能会问，那子组件怎么拿父组件的 Dom Node 呢，从 React 的单向数据流角度出发，遇到这种情况我们应该通过回调通知给父组件，再由父组件自行判断如何修改 Node，其实父组件拿子组件的 Node 情况也很少，大多数情况下我们是通过 props 传递变化给子组件，获取子组件 Node，更多的情况下是为了避开大量重新渲染去修改一些Node的属性(比如 scrollLeft)。

二、DOM 操作

jQuery 中提供了丰富的操作方法，但一个个操作 DOM 元素有的时候真的很烦人并且容易出错。React 通过数据驱动的思想，通过改变 view 对应的数据，轻松实现 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 (                              {this.state.list.map((item) => {item}
)}                 尾部插入 Dom 元素                 头部插入 Dom 元素                 删除 Dom 元素             
         );     } }

三、事件的监听

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 (             点击我弹出弹框

); } }

这里有一个小细节就是 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+ 级别的兼容性。

四、事件的触发

和事件监听一样，无论是 Dom 事件还是自定义事件，都有很优秀的第三方库帮我们去处理，如果是 DOM 事件，推荐 bean，如果是自定义事件的话，推荐 PubSubJS。

五、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 (             just a demo
         );     } }

六、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 (              this.rootNode = c}                  style={{ width: '100px', overflow: 'auto' }}             >                  just a demo

但是，在大部分的情况下，我们完全不需要做，因为 React 的单向数据流和数据驱动渲染，我们可以不通过 DOM，轻松拿到和修改大部分我们需要的 DOM 属性。

在 jQuery 的时代，我们通常靠获取 Dom 元素后，再 addClass/removeClass 来改变外观。在 React 中通过数据驱动和第三库classnames 修改样式从未如此轻松。

jQuery 的 css 方法用于设置 DOM 元素的 style 属性，在 React 中，我们可以直接设置 DOM 的 style 属性，如果想改变，和上面的 class 一样，用数据去驱动。

新闻中心

其他资讯