Reactまとめ(四)--refsとforceUpdate

一.react refs
refは、react上の特殊な属性であり、従来のデータストリームの外で、サブ要素を強制的に修正することができるのは、reactコンポーネントの例であってもよく、またはdom要素であってもよい.
dom要素およびクラスコンポーネントにrefを追加することができ、reactコンポーネントは、ロード時にdom要素をrefにフィードバックし、componentDidMountまたはcomponentDidUpdateのこれらのライフサイクルの前に実行します.
1.dom元素にrefを追加する

    ...
    handleClick(){
        this.nameInput.focus();
    }

    render(){
        return(
            <div>
                <input ref={(input)=>{this.nameInput = input;}}
                <button onClick={this.handleClick}>         button>
            div>
        );
    }

2.reactコンポーネントにrefを追加する

App.js
    otherFunction(){
        this.pager.changePage(5);
    }
    ....
    render(){
        return(
            <Pager  ref={(pager)=>{this.pager = pager; }} />
        );
    }

Pager.js
    ...
    changePage(page){
        this.setState({
            page : page
        });
    }
    ...
//       ref        ，       setState       ，
//           ，             render

3.refと関数コンポーネント

function MyTest(){
    let textInput = null;

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

    return(){
        <div>
            <input ref={(input)=>{textInput=input}/>
            <button onClick={handleClick}>         button>
        div>
    }
}

4.サブコンポーネントが親コンポーネントに対してdomノードを暴露する
ごく少数の場合、親コンポーネントからサブノードのdomノードにアクセスする必要があるかもしれません.

App.js
    ...
    render(){
        return(
            <Sub inputRef={ el => this.inputRef = el; } />
        );
    }   

Sub.js
    ...
    render(){
        return(){
            <div>
                <input ref={this.props.inputRef} />
            div>
        }
    }        

二、react forceUpdate
デフォルトでは、コンポーネントのstateまたはpropsが変更されると、コンポーネントは再レンダリングされます.あなたのレンダー()方法が他のデータに依存している場合、ReactコンポーネントはforceUpdate()を呼び出して再レンダリングする必要があることを教えてくれます.
forceUpdate()を呼び出しますと、コンポーネントがSHuldComponentUpdateをスキップし、レンダー()を直接呼び出します.これは、各サブアセンブリのshuldComponentUpdate()方法を含む通常のライフサイクル方法をトリガします.
forceUpdateは再renderです.一部の変数はstateにないですが、この変数の更新を達成したい時、レンダーを更新します.あるいはstateの中のある変数のレベルが深すぎて、更新する時自動的にレンダーを触発していません.これらの場合は、任意でforceUpdateを呼び出すことができます.自動的にレンダーを起動します.

Sub.js
class Sub extends React.Component{
    construcotor(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}div>);
    }
}

App.js
class App extends React.Component{

    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>clickbutton>
        div>);
    }
}