Reactステップノート3(Refs&DOM)

6918 ワード

refsは、renderで作成されたdomノードまたはReact要素にアクセスする方法を提供します.
典型的なReactデータストリームでは、 （props）は親コンポーネントが子コンポーネントと対話する唯一の方法である.サブコンポーネントを変更するには、新しいpropsを使用して再レンダリングする必要があります.しかし、場合によっては、典型的なデータストリームの外で、サブコンポーネントを強制的に変更する必要があります.修正するサブコンポーネントは、Reactのインスタンスであってもよいし、DOM要素であってもよい.この2つの場合、Reactは解決策を提供する.
Refsの使用方法
①処理焦点、テキスト選択又はメディア制御②強制動画のトリガー③第三者のDOMライブラリを統合することが宣言により実現可能であれば、Refs例えばDialogコンポーネントにopen()及びclose()メソッドを直接露出させないように、isOpen属性を伝達することが望ましい.
Refsを過度に使用しない
まず、アプリケーションでRefsを使用してコンポーネントを更新することを考えるかもしれません.もしそうであれば、state属性のコンポーネントレベルでの位置を考えてみてください.通常、ステータスアップグレード:コンポーネントstateのレベルをアップグレードするのがより適切な方法であることがわかります.例については、ステータスアップグレードを参照してください.
Note
以下の例は既にReact v 16を用いる.3導入されたReact.createRef() API更新.Reactの以前のリリースを使用している場合は、コールバック形式のrefsを使用することをお勧めします.
Refsの作成
①Reactを使用する.creatRef()を使用してrefsを作成し、refプロパティを使用してReact要素を取得します.2コンポーネントを構築する場合、refsは通常、コンポーネントの属性に付与される.これにより、コンポーネントのいずれかで彼を使用することができます.

class MyComponent extends React.Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    render(){
        return 
    }
}

访问refs

当一个ref属性被传递给一个render()函数中的元素时，可以使用ref中的current属性对节点的引用进行访问。

const current = this.myRef.current;

refの値は、ノードタイプ1に依存し、refの属性が通常のHTML要素に使用されると、React.createRef()は、currentの属性として最下位のDOM要素を受信し、refを作成する.②refがカスタムクラスコンポーネントに使用される場合、refオブジェクトは、そのコンポーネントがマウントされたインスタンスをcurrentとして受信する.③インスタンスがないため、関数形式のコンポーネントにrefを使用することはできません.
demo
次のコードは、ref属性のノードへの参照を格納します.

class CustomTextInput extends React.Component{
    constructor(props){
        super(props);
        //  ref   textInput DOM  
        this.textInput = React.createRef();
        this.focusTextInput = this.focusTextInput.bind(this);
    }

    focusTextInput(){
        //       api text    
        //    current   dom  
        this.textInput.current.focus();
    }

    render(){
        //    React     input ref              textInput  
        return(
            
                
                
            
        )
    }
}

ReactDOM.render(
    ,document.getElementById('root')
)

Reactは、コンポーネントのロード時にDOM要素をcurrentのプロパティに転送し、コンポーネントのアンインストール時にnullに戻り、refの更新はcomponentDidMountedとcomponentDidUpdateのライフサイクルフックの前に発生します.
クラスコンポーネントにrefを追加
上のCustomTextInputをパッケージして、マウント後すぐにクリックされるのをシミュレートしたい場合は、refを使用してカスタム入力にアクセスし、focusTextInputメソッドを手動で呼び出すことができます.

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      
    );
  }
}

なお、この方法は、classを使用して宣言されたコンポーネントにのみ有効である.
Refsと関数コンポーネント
関数コンポーネントにはインスタンスがないため、refプロパティを関数コンポーネントに使用することはできません.refまたはstateおよび他の宣言サイクルメソッドを使用する場合は、関数コンポーネントをclass宣言コンポーネントに変換する必要があります.
注意:DOMまたはrefコンポーネントを指す限り、関数コンポーネントの内部でclassを使用できます.

function CustomTextInput(props){
   //       textInput，  ref         
   let textInput = null;

   function handleClick(){
       textInput.focus();
   }

   return (
       
           {textInput=input}}/>
           
       
   )
}

親コンポーネントへのDOMノードの露出
ごく少数の場合、親コンポーネントから子コンポーネントのノードにアクセスしたい場合があります.コンポーネントのパッケージを破壊するため、通常は推奨されません.しかし、たまにフォーカス後者をトリガしてサブノードdomのサイズまたは位置を測定するために使用することもできる.
サブコンポーネントにrefを追加できますが、domノードではなくコンポーネントインスタンスしか取得できないため、この方法は関数コンポーネントでは無効です.
React 16.3以上を使用する場合は、ref転送を推奨します.Ref転送は、コンポーネントが自分のrefを露出するようにサブコンポーネントのrefを露出させることができ、親コンポーネントにサブコンポーネントをどのように露出させるかのDOMノードについて、ref転送ドキュメントに詳細な例がある.
React 16.2以下を使用するか、ref転送よりも柔軟性が必要な場合は、この代替案を使用してrefを特殊な名前のpropとして直接伝えることができます.
できればDOMノードの露出はお勧めしませんが、時には命の藁になることがあります.これらのスキームには、サブコンポーネントにコードを追加する必要があります.サブコンポーネントの実装に制御権がない場合は、残りの選択はfindDOMNode()を使用しますが、推奨されません.
コールバックrefs
Reactはまた、refを設定する別の方法をサポートし、 refと呼ばれ、refをいつ設定および削除するかをより細かく制御することができる.
これは、createRefで作成されたrefのプロパティとは異なり、「コールバックref」は、Reactコンポーネントのインスタンスを受信する関数、またはhtml内のdom要素をパラメータとして格納し、他の場所にアクセスするために格納する関数を渡します.
demo: refコールバック関数を使用して、インスタンスのプロパティにdomノードへの適用を格納します.


class CustomTextInput extends React.Component{
    constructor(props){
        super(props);
        this.textInput = null;
        this.setTextInputRef=element=>{
            this.textInput=element;
        }

        this.focusTextInput=()=>{
            if(this.textInput) this.textInput.focus();
        }
    }

    componentDidMount(){
        //             
        this.focusTextInput();
    }

    render(){
        //  ref    text    dom     react
        return(
            
                
                
            
        )
    }
}

Reactは、コンポーネントのマウント時にdom要素をrefのコールバック関数に転送して呼び出し、アンインストール時にnullに転送して呼び出す.refのコールバック関数は、componentDidMountおよびcomponentDidUpdateのライフサイクル関数が呼び出される前に呼び出されます.refsで作成したReact.createRef()オブジェクトを渡すことができるように、コンポーネント間でコールバック形式のrefsを渡すことができます.

function CustomTextInput(props){
    return(
        
            
        
    )
}

class Parent extends React.Component{
    render(){
        return(
            this.inputElement=el} />
        )
    }
}

上記の例では、Parentがそのrefコールバック関数をinputRefとしてCustomTextInputに渡し、CustomTextInputがrefプロパティを介して渡します.最終的には、Parentのthis.InputElementは、CustomTextIputの要素に対応するDOMノードに設定されます.
に注意
refコールバックがインライン関数で定義されている場合、更新中に2回呼び出され、最初のパラメータはnullで、その後のパラメータはDOM要素です.これは、レンダリングのたびに新しい関数インスタンスが作成されるためです.したがって,Reactは古いrefをクリーンアップし,新しいものを設定する必要がある.refのコールバック関数をクラスのバインド関数として定義することで、上記の問題を回避できますが、ほとんどの場合は重要ではありません.

C++逆アセンブリ学習ノート(二)

統計学習方法第八章AdaBoost