Question

我有新的反应，我得知知道操纵由Jquery做出反应组成的dom是一个非常糟糕的主意。但是，通过与Jquery做出反应来操作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");
};

它适用于此页面，但我想将其合并到更复杂的页面中，这些页面会更改状态并重新呈现。如何使用添加的样式对地址组件做出反应？

Answer 1

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

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

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

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

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

ReactDOM.render()运行，并启动反应引擎
初始反应渲染周期有2例如按钮和1条错误消息
应用jQuery，动画2个按钮和1个错误消息
用户点击一下
使用2个新按钮和1个新错误消息对重新渲染进行反应
您的jQuery不会再次运行
新的反应按钮和错误消息没有获得新的样式

或者，如果您在每个activateJQ()之后致电render()：

1000ms超时可能与您的渲染周期不同步，因此可能导致不必要的DOM更新，或者更糟糕的是，如果在jQuery更新期间反应发生变化，则中断
带有样式更新的jQuery类选择器是一个众所周知的原始（因此性能杀死）工具。它需要每次遍历整个DOM以进行更新，其中包括对甚至不需要更新的组件的更新。在react中管理样式效率要高得多：样式化仅适用于需要它的组件，并且仅在他们需要时才应用。

随着应用程序的增长，你会发现混合反应和jQuery来管理DOM和样式（它们是相互依赖的）会变得难以管理。

是否可以使用jquery

1 个答案: