jqueryを使って反応コンポーネントのスタイルを変更するのはいいですか？

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を使用してスタイリング（カラーまたはエラーメッセージ）を適用し、アニメーション化されたスタイリング（ボタンに背景色など）を適用しても何も問題はありません。

リアクションを使用してスタイリングを適用することには、具体的な利点があります。人生の正しい瞬間にスタイリング（コンポーネントに割り当てるCSSクラス）とアニメーション（componentDidMount()または<ReactCSSTransitionGroup>）コンポーネントのサイクル。これにより、コードのデバッグが容易になります。スタイリングが途切れると、疑わしいコードが反応する場所の適切な場所にあることがわかります。

注意：reactはダイナミックエンジンであり、ユーザーの操作に基づいてDOMの構造を変更することができます。あなたのCSSスタイルはDOM構造に密接に結びついているので、それらを同期させたい（そしてコード内の同じ場所で管理する）ことが望ましいでしょう。

あなたの特定のケースでは、私はあなたがjQueryのセットアップが故障+反応する少なくとも一つのシナリオを考えることができます：

• ReactDOM.render()実行、および開始はエンジンを反応
• 最初のサイクルは2例がありますレンダリング反応しいくつかのクリック
• は、2つの新しいボタンで再レンダリングし、1つの新しいエラーメッセージ
• あなたのjQueryのないボタンと2つのボタンと1つのエラーメッセージ
• をアニメーション化するjQueryのが適用される1つのエラーメッセージ
• 、ユーザーが反応しませんあなたは、各後activateJQ()を呼び出す場合、新しいスタイリングに

を取得したりしないでください再び

新しいボタンと、エラーメッセージが反応し実行しませんでが反応：

• 1000ミリ秒タイムアウトは、あなたのレンダリングサイクルと同期して実行する可能性があるので、jQueryの更新中に変化のDOMを反応させる場合破る、不要なDOMの更新も悪くも生じ得る
• jQueryのクラス - スタイリングの更新を伴うセレクタは、粗末な（したがってパフォーマンスを殺す）楽器です。更新を必要としないコンポーネントへの更新を含む更新を行うためには、毎回DOM全体を走査する必要があります。反応の中でスタイリングを管理する方がはるかに効率的です。スタイリングは、必要なコンポーネントにのみ適用され、必要なときにのみ適用されます。

アプリケーションが大きくなると、反応とjQueryを混合してDOMとスタイリング（非常に相互依存している）を管理することが管理できなくなることがわかります。