使用React的jQuery选择器可以吗？
我知道混合jQuery和ReactJS是不可取的，因为ReactJS不知道jQuery对DOM做出的任何修改。 但是，如果您只使用jQuery查询DOM并轻松方便地查找节点，同时将所有DOM编辑保留给ReactJS，那该怎么办呢？ 除了jQuery是一个大型库，还有其他任何缺点吗？
一个示例用例是每当下拉菜单组件安装该检查以查看用户是否单击菜单上的任何位置时设置事件侦听器，以便菜单可以关闭。 jQuery .parents()方法是检查单击目标是否是菜单容器元素的子项的非常方便的方法。 有没有一种简单的方法可以在ReactJS或vanilla JavaScript执行此ReactJS ？
以下是此示例的代码示例：
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) } }
是的，我想说在React中使用jQuery有一些缺点。
VDOM差异算法会变得混乱
这是你提到的。 是的，如果你只使用read-only属性就可以了，但除非你的目标是旧的浏览器，否则像document.querySelector重量会更轻。
你所带来的每一种依赖，特别是像图书馆这样大的依赖，都应该经过精心的审查。 有关详细信息，请访问网站肥胖症 。
此外，“我只会用它来阅读并让React完成剩下的工作”的想法会给你的代码增加一层混乱，正如我们将在下一个例子中看到的那样。
你放弃了React的模式
在我看来，更大的问题是放弃React的模式。 用一句话来形容React，我想说：
React是一个基于组件的库，用于生成从state输入派生的HTML，CSS和JavaScriptfunction。
假设我有一个简单的UserProfile组件。 此组件将包含有关用户的一些数据，包括用于接收推送通知的开关：
// 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 ( {name}
); } }
简单来说，组件表示是从组件的状态派生的。 如果isReceivingNotifcations为true，则将选中该复选框。
让我们看看这个与提出的设计模式相同的例子：
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 ( {name}
); } }
第一个是更清晰，无论你如何使用jQuery或你将使用的任何DOM操作库来格式化它。
这是一个人为的例子，但每次我在现实生活中看到它的某些版本时，它都是一团糟。
到底为什么？
花一点时间学习React设计模式。 我建议在React中思考 。 jQuery应该是最后的手段，因为你使用React是出于我认为的原因。
一个例外是您在React中使用的jQuery库
在这种情况下，除了重写库之外，您没有其他选择。 正如本文中强调的那样，您应该编写一个包装器组件以使其符合React。
我是否正确地说你的问题归结为：在浏览器DOM中查询你将在React中使用的信息是否可以？ 由于虚拟DOM总是与浏览器DOM同步，因此在浏览器DOM中进行只读查找肯定不错。 实际上，如果要添加交互性或用户事件处理，有时需要在浏览器DOM而不是虚拟DOM上执行此操作。
然后，对于使用哪个库：除了jQuery之外，还有像minifiedjs这样的较轻的选项。