Is jQuery Selectors with React OK?

Question

I know that mixing jQuery and ReactJS is not practical since ReactJS is not aware of any DOM modifications created by jQuery. But what if you only use jQuery to query the DOM and search for nodes easily and conveniently, leaving all the DOM editing in ReactJS. Besides jQuery, which is a large library, are there any other disadvantages?

An example of use is to configure event listeners whenever a drop-down menu component mounts this check to see if the user clicks anywhere on the menu so that the menu can be closed. The jQuery method .parents()is a very convenient way to check if the click target is a child of the menu container. Is there an easy way to do this in ReactJSor using vanilla JavaScript?

Here is the sample code for this example:

handleClick = e => {
  const element = $(e.target)
  if( !( element.parents('.menu').length || element.hasClass('menu'))) {
    this.setState({ menuOpen: false })
  }
}

componentWillUpdate (nextProps, nextState) {
  if(nextState.menuOpen && !this.state.menuOpen) {
    document.addEventListener('click', this.handleClick, false)
  } else if (!nextState.menuOpen && this.state.menuOpen) {
    document.removeEventListener('click', this.handleClick, false)
  }
}

Answer 1

Yes, I would say that there are drawbacks to using jQuery in React.

VDOM differential algorithm gets confused

You mentioned that. Yes, it will be good if you use only attributes read-only, but if you do not target older browsers, then something like document.querySelectorwill be lighter.

Any decentration you bring, especially in the form of a library, must be carefully checked. For more information see the Epidemic Obesity Site .

In addition, the idea of ​​“I will use it read-only and let React do the rest” will add a significant level of confusion to your code, as we will see in the following example.

You refuse React templates

, . , :

React - , HTML, CSS JavaScript-, state.

, UserProfile. , push- :

// Please note this is simplified pseudo-code, and will likely not work
class UserProfile extends Component {
  state = {
    name: 'Bob',
    profilePic: 'someurl.com/profile-pic',
    isReceivingNotifications: false
  }

  updateReceivingNotifications = () => {
    this.setState({ isReceivingNotifications: !this.state.isReceivingNotifications })
  }

  render() {
    const { name, profilePic, isReceivingNotifcations } = this.state;
    return (
      <div>
        <h2>{name}</h2>
        <img src={profilePic} />
        <input type="checkbox" checked={isReceivingNotifications} onChange={this.updateReceivingNotifications} />
      </div>
    );
  }
}

, . isReceivingNotifcations , .

:

class UserProfile extends Component {
  state = {
    name: 'Bob',
    profilePic: 'someurl.com/profile-pic',
    isReceivingNotifications: false
  }

  componentDidMount() {
    const checkBox = document.getElementById('my-checkbox');
    const that = this;
    // Use a regular function to bind the this context to the checkbox instead of component
    checkBox.addEventListener('change', function() {
      if (this.checked) {
         that.setState({ isReceivingNotifcations: true });
      } else {
         that.setState({ isReceivingNotifcations: false });
      }
    });
  }

  render() {
    const { name, profilePic, isReceivingNotifcations } = this.state;
    return (
      <div>
        <h2>{name}</h2>
        <img src={profilePic} />
        <input
          type="checkbox"
          checked={isReceivingNotifications}
          id="my-checkbox"
          />
       </div>
    );
  }
}

, , jQuery DOM-, .

, , - , .

, ?

React. React. jQuery , React , .

- jQuery, React

, . , -, React.

Answer 2

, : DOM , React? DOM DOM , DOM, , . , , DOM DOM.

, : jQuery , minifiedjs.