なぜrefsを使ってReactアプリケーションの速度を落としていますか？

Question

Reduxに格納する要素をいくつか調べて、要素に集中できるようにする必要があります。

  <BasicSelect 
       selectRef={(e) => this.storeRef('make', e) } ... /> 

そして、ここではstoreRefです：私はこのドロップダウン持っ

このことから

storeRef(list, ref) 
{ 
    if(this.state.refsStored[list]) { 
     return; 
    } else { 
     this.props.storeSelectRef(list, ref); 
     var refState = Object.assign({}, this.state.refsStored); 
     refState[list] = true; 
     this.setState({refsStored: refState}); 
    } 
} 

を、それは、一度参照を格納し、その後、単純に比較した後、返す必要があります。

ただし、<BasicSelect>のドロップダウンのオプションをクリックするたびに、アプリケーションは< 1s（目立つ）のためにハングアップし、次に続行します。

storeRef(list, ref) { 
    return; 
} 

ドロップダウン選択は超高速であり、すべてが良いです：私は次のようにstoreRefを変更した場合は

（明らかに意図した結果では動作しません）。では、どうしてこの比較はif(this.state.refsStored[list])がかなり遅いのですか？

Answer 1

コンポーネントの状態を参照しないでください。コンポーネントの状態は、レンダリング時に必要なものに対してのみ使用する必要があります。また、コンポーネントの状態を更新するときに再レンダリングが発生する必要があります。コンポーネントインスタンスに直接引用文献を保存します。

<BasicSelect selectRef={selectInstance => this.selectInstance = selectInstance} /> 

また、私は一種の正直に言うと、小道具としてあるものselectRef困惑しているが、私は基礎となる<select>タグに上のrefを<BasicSelect>コンポーネントに転送することを前提と？

とにかく、重要な点は、setState()を呼び出しているので、毎回不必要な再レンダリングが発生していることです。それをしないでください。