使用jquery在react组件内部设置样式可以吗

Is it ok to style inside react components using jquery

本文关键字：样式 设置 内部 jquery react 组件 使用      更新时间：2023-09-26

我是react的新手，我知道操纵react与Jquery组成的dom是一个非常糟糕的想法。然而，在通过使用Jquery进行react渲染的dom组件上操作样式是个坏主意吗？

ReactDom.render( <LoginPage/>, document.getElementById('root') ); 
//after render call activateJQ();
var activateJQ = function(){
   $('button').animate({
      backgroundColor: "#aa0000",
      color: "#fff",
      width: 500
    }, 1000 );
   $('.error-msg').css("color","red");
};

它在这个页面上有效，但我想把它合并到更复杂的页面中，这些页面可以更改状态并重新发布。地址组件与添加的样式将如何反应？

简短的回答是：可以。但这是一个非常糟糕的主意，如果你这样做了，你会后悔的

在您的特定示例中，使用jQuery应用样式（颜色或错误消息）和动画样式（按钮的背景颜色等）不会破坏任何内容。

也就是说，使用react应用样式有一些特定的优势：您必须在组件生命周期的正确时刻应用样式（在分配给组件的css类中）和动画（在componentDidMount()或使用<ReactCSSTransitionGroup>）。这使您的代码更容易调试：如果您的样式出现问题，您可以在react中的正确位置找到所有可疑代码。

记住：react是一个动态引擎，它可以根据用户操作更改DOM的结构。css样式与DOM结构紧密耦合，因此您希望它们同步（从而在代码中的同一位置进行管理）。

在您的具体情况下，我可以想到至少一种情况，即您的react+jQuery设置出现故障：

  • ReactDOM.render()运行并启动反应发动机
  • 初始react渲染周期有2个按钮和1条错误消息
  • 应用jQuery，为2个按钮和1条错误消息设置动画
  • 用户进行了一些单击
  • react使用2个新按钮和1条新错误消息重新渲染
  • 您的jQuery不再运行
  • 新的react按钮和错误消息没有获得新的样式

或者，如果您在react:中的每个render()之后调用activateJQ()

  • 1000ms超时可能会与渲染周期不同步，因此可能会导致不必要的DOM更新，或者更糟的是，如果react在jQuery更新期间更改DOM，则会中断
  • 带有样式更新的jQuery类选择器是一个出了名的粗糙（因此会扼杀性能）工具。它需要每次遍历整个DOM来进行更新，其中包括对甚至不需要更新的组件的更新。在react中管理样式要高效得多：样式只应用于需要它的组件，并且只在它们需要它的时候应用

随着应用程序的增长，您会发现混合使用react和jQuery来管理DOM和样式（这两者之间非常相互依赖）将变得难以管理。

相关文章：