「深くreact技術スタックに入る」学習ノート(三)雑談React

前言
次は新しい章に入りましょう.この文章は主にReactイベントシステムとフォーム操作について説明します.
本文
一:イベントシステム
1.reactのイベントシステムreactイベントシステムはW 3 school規格に適合しており、IE互換性の問題は存在しない.また、元のブラウザイベントと同じAPIインターフェースがある.同様にイベントの泡立ち機構をサポートし、stopPropagation()とpreventDefault()を使用して終了することができます.すべてのイベントは自動的に最外層に結合されます.元のイベントオブジェクトにアクセスする必要がある場合は、native Event属性を使用することができます.
2.合成イベント(1)イベント委任reactは、すべてのイベントを構造の最外層にバインドし、同意されたイベントモニターを使用して、このイベントモニター上でマッピングを維持し、すべてのコンポーネントの内部のイベント傍受および処理関数を保存する.(2)自動的にreactコンポーネントに結合され、各方法の文脈はコンポーネントの一例、すなわち自動バインディングthisが現在のコンポーネントであることを指す.しかし、ES 6 clasesまたは純粋な関数を使用すると、この自動バインディングは二度と存在しなくなり、マニュアルでthisのバインディングを実現する必要があります.(3)バインディング方法3−1:bind方法:イベントハンドラ内のthisをバインディングするのを助け、イベントプロセッサにパラメータを入力することができます.

import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return Test;
    }
}

3-2コンストラクタ内宣言(推奨):コンポーネントのコンストラクタ内でイベントへのバインディングが完了する.

class App extends Component{
    handleClick(e){
        console.log(e);
        this.handleClick=this.handleClick.bind(this);
    }
    render(){
            return Test;
        }
}

3-3矢印関数:この関数のスコープを定義するthisを自動的に結合します.

class App extends Component{
   const handleClick= (e)=>{
        console.log(e);
    }
    render(){
            return Test;
        }
} 
import React,{Component} from 'react'
class App extends Component{
    handleClick(e,arg){
        console.log(e,log);
    }
    render(){
        return this.handleClick()}>Test;
    }
}

3.元のイベントcomponenDidMountはコンポーネントのインストールが完了し、ブラウザに真実のDOMが存在したら呼び出します.この時、私達は元のイベントに対するバインディングを完了します.

import React,{Component} from 'react'
class nativeEventDemo extends Component{
    componentDidMount(){
        this.refs.button.addEventListener('click',e=>{
            handleClick(e);
        })
    }
    handleClick(e){
        console.log(e);
    }
    componentWillUnmount(){
        this.refs.button.removeEventListener('click');
    }
    render(){
        return Test
    }
}

注意:reactでDOM元イベントを使用する場合は、必ずコンポーネントをアンインストールする時に手動で除去してください.メモリ漏れが発生する可能性があります.
4.ミックスイベント
私たちはコンポーネント内でイベントをコンポーネントの範囲外の領域に結びつけることができません.オリジナルイベントを使用してのみ実現できます.
しかし、できるだけReactで合成イベントと原生DOMイベントを混用する:reactEvent.native Event.stopPropagatoin()でイベントの泡が発生するのを阻止することはできません.Reactイベントの泡立ちはReact合成システムにのみ適用され、元のイベントの泡立ちを止めることができません.逆に、元のイベントでは、イベントの泡が発生するのを阻止するが、Reactイベントの広がりを阻止することができる.
Reactを使用できない合成イベントシステムのシーンについては、原生イベントを使用して行う必要があります.
二:フォーム