React.JsでのonScrollイベントの追加と削除について詳しく説明します。

React は、フロントエンド インターフェイスを構築するために Facebook によって開発された JS コンポーネント ライブラリです。その背後にある強力な背景により、このライブラリは技術開発に問題はありません。この記事では、React.Js での onScroll イベントの追加と削除に関する関連情報を主に紹介し、サンプル コードを通じて詳細に紹介します。この記事は、学習や作業に必要な学習に役立ちます。以下に来て一緒に学びましょう。

Reactの利点

• 大規模なプロジェクト開発においてデータが変化し続けて操作が困難になる問題を解決

• コンポーネントベースの開発により開発が高速化されます

• 一方向のデータフローです。質問を見つけるのに役立ちます

• 仮想 DOM には、変更する必要がある全体の位置をすばやく計算できる一連の差分アルゴリズムがあります。たとえば、リストを削除して挿入します。新しいテーブルを作成すると、計算後に差異を比較して挿入します。 pのスクロールイベントを取得するのに比べて、ReactJSでpにスクロールイベントを追加したい場合は基本的に追加することができません（私の能力が限られているせいかもしれませんが、とにかく今のところ直接追加する方法は見つかっていません） p.イベントにスクロールイベントを追加します。

スクロールを実装したい場合は、componentWillMount, window.addEventListener(‘scroll’, this.onScroll.bind(this)) にスクロール イベントを登録する必要があります。イベントの追加は非常に簡単です。

componentWillUnmount の window.removeEventListener(‘scroll’, this.onScroll.bind(this)) を削除します。

追加するのは簡単ですが、削除するのは難しいです。他のページでは、スクロールすると onScroll のイベントがトリガーされ、コンポーネントがアンインストールされたため操作できないというエラーが報告されます。コードなどを確認してください。

きっと遭遇したはずだと思って、スクロールを削除する方法に関する記事を見つけました。

コードは次のとおりです:

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

関連する推奨事項:

HTML5で要素のスクロールバーがスクロールしているときにトリガーされるイベントonscroll

JavaScriptがonScrollイベントをトリガーする関数スロットリングの詳細な説明

IE6 の onScroll イベントについて 次に、スクロールするたびに 3 つのバグ指示_JavaScript スキルがトリガーされます

以上がReact.JsでのonScrollイベントの追加と削除について詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。