リアクション付きjQueryセレクタは大丈夫ですか？

Question

jQueryの混在を知っていますが、ReactJSはjQueryによって作成されたDOMの変更を認識していないため、ReactJSはお勧めできません。しかし、すべてのDOM編集をReactJSに任せながら、DOMを照会してノードを簡単かつ便利に見つけるためにjQueryを使用すればどうでしょうか？大きなライブラリであるjQueryを除いて、これには他にも欠点がありますか？

例の使用例では、ドロップダウンメニューコンポーネントがそのチェックをマウントしてユーザーがメニューから離れてメニューを閉じることができるかどうかを確認するたびに、イベントリスナーを設定しています。 jQuery .parents()メソッドは、クリックターゲットがメニューコンテナ要素の子であるかどうかを確認する非常に便利な方法です。 ReactJSまたはvanilla JavaScriptでこれを行う簡単な方法はありますか？ここで

は、この例のコードサンプルです：

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

は、私はあなたの質問は、つまるところ言うに修正アム：それはあなたが反応で使用する情報については、ブラウザのDOMを照会するためにOKですか？ 仮想DOMは常にブラウザDOMと同期されるため、ブラウザDOMで読み取り専用ルックアップを実行することは間違いありません。実際に、インタラクティブ機能やユーザイベント処理機能を追加したい場合は、仮想DOMの代わりにブラウザのDOMで行う必要があることがあります。

次に、どのライブラリを使用するか：jQueryのほかに、minifiedjsのようなより軽いオプションがあります。

Answer 2

はい、ReactでjQueryを使用することには不利な点があります。

はVDOM差分のアルゴリズムでは、これはあなたが言及したものです

混乱します。はい、read-only属性のみを使用すると問題ありませんが、古いブラウザをターゲットにしている場合を除き、document.querySelectorのようなものは軽量になります。

あなたが持ち込んでいるすべての貧困は、特に図書館のように大きなものであり、細心の注意を払って審査されるべきです。詳細はthe website obesity epedemicを参照してください。

さらに、私は次の例で示すように、「私はそれを読み込みに使用して、残りのものを実行させます」という考えは、コードに重大な混乱をもたらします。

あなたは私の意見で反応

のパターンを放棄し、より大きな問題が反応のパターンを放棄しています。 Reactを1つの文で記述すると、

Reactは、state入力から派生したHTML、CSS、およびJavaScript機能を生成するために使用されるコンポーネントベースのライブラリです。

単純な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 (
     <div> 
     <h2>{name}</h2> 
     <img src={profilePic} /> 
     <input type="checkbox" checked={isReceivingNotifications} onChange={this.updateReceivingNotifications} /> 
     </div> 
    ); 
    } 
} 

シンプル、コンポーネントのプレゼンテーションは、コンポーネントの状態に由来しています。 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 (
     <div> 
     <h2>{name}</h2> 
     <img src={profilePic} /> 
     <input 
      type="checkbox" 
      checked={isReceivingNotifications} 
      id="my-checkbox" 
      /> 
     </div> 
    ); 
    } 
} 

最初は関係なく、あなたはjQueryのか、あなたが使用するどのようなDOM操作ライブラリでこれをフォーマットする方法を、よりクリーンではありません。

これは人為的な例ですが、実生活でこのバージョンを見たときはいつもかなり混乱しています。

最後に、なぜですか？

ちょっと時間をかけて、反応パターンを学習してください。私はを提案したいと思います。あなたがReactを使っているのと同じ理由でjQueryが最後の手段になるはずです。これに

唯一の例外は、ライブラリを書き換え以外の他のオプションを持っていない、あなたが使用してこの場合

に反応jQueryのライブラリです。 this articleで強調表示されているように、それに対応するためにラッパーコンポーネントを記述する必要があります。