Reactネイティブレンダリングメソッドの呼び出し3-5x

Question

私はReact and React Nativeの新機能を使用しています。

console.log(...)を私のコンポーネントの​​メソッドに入れて、レンダリングの頻度を確認できるようにしました。

これは私の最初のスクリーンの1つで、私はこれを3〜4回レンダリングしていることに気付きました。

このメソッドのコードは以下に定義されており、3つのセクションをレンダリングするだけです。

以下のコードに、間違って実行されているか、または私が別のやり方で実行すべきでない非実行的な方法がありますか？たとえば、私はコールバックをバインドする方法が正しくなく、複数回（レンダリングが完了するたびに）登録されるいくつかの場所を読みます。

また、​​を複数回実行するのは問題ないですが、回避することはできますか？

class Home extends Component { 

    _onRequestItemClick(id){ 
    alert(id); 
    } 

    _onMakeRequestClick(){ 
    this.props.dispatch(navigatePush('Create Request')); 
    } 

    render() { 

    console.log('Rendering Home...'); 

    return (
     <View style={styles.container}> 
     <View style={[styles.base,styles.halfHeight]}> 
      {this._renderRequestList()} 
     </View> 
     <View style={[styles.base,styles.quarterHeight]}> 
      {this._renderMakeRequestButton()} 
     </View> 
     <View style={[styles.quarterHeight]}> 
      {this._renderFulfillmentScroller()} 
     </View> 
     </View> 
    ); 
    } 

    _renderRequestList(){ 
    let { requests } = this.props; 
    return (
     <RequestList 
     requests={requests} 
     onRequestItemClick={this._onRequestItemClick.bind(this)} 
     /> 
    ); 
    } 

    _renderMakeRequestButton(){ 
    return (
     <ActionButton 
     title="Make Request" 
     onActionPress={this._onMakeRequestClick.bind(this)} 
     /> 
    ); 
    } 

    _renderFulfillmentScroller(){ 
    let { fulfillments } = this.props; 
    var onPressItem = (item)=> alert('item selected:' + item.id); 
    return (
     <CalendarBlockScrollView 
     bounces={false} 
     style={styles.scroller} 
     itemStyle={styles.fulfillment} 
     items={fulfillments} 
     onPressItem={onPressItem} 
     /> 
    ); 
    } 
} 


function mapDispatchToProps(dispatch) { 
return { 
    dispatch 
}; 
} 

function mapStateToProps(state) { 
    return { 
    userId:state.get('profile').current.id, 
    requests:state.get('requests').all.requests, 
    fulfillments: state.get('fulfillments').all.fulfillments 
    } 
} 

export default connect(mapStateToProps,mapDispatchToProps)(Home); 

Answer 1

何かが欠けていない限り、このコードは大丈夫です。たぶんそれは複数のレンダリングをもたらすこの1つを呼び出すコンポーネントですか？
私はあなたにいくつかの提案を与えることができます。

render() { 
    console.log('Rendering Home...'); 
    return (<View />); 
} 

と部品が複数回レンダリングされるかどうかを確認します。

• はでレンダリング交換してみてください。そうでない場合は、問題が見つかるまで毎回別のピースを追加してみてください。そうであれば、このコンポーネントの問題ではありません。これを引き起こしている親コンポーネントです。

• あなたが言ったように、バインドは非常に高価です。レンダリングごとにバインドするのは悪い考えです。あなたはどちらかのできるバインド工事時間中または矢印機能を使用します。

  constructor() { 
      this._onRequestItemClick = this._onRequestItemClick.bind(this); 
  } 
  _renderMakeRequestButton(){ 
      return (
       <ActionButton 
        title="Make Request" 
        onActionPress={(event) => this._onMakeRequestClick(event)} 
        /> 
      ); 
  

  }

• にconsole.logは高価であり、生産に行くとき、あなたがそれを削除してください。

• mapDispatchToPropsは冗長です。あなたはただそれを削除することができます。

あなたが反応し、ネイティブのパフォーマンスについての詳細を読むことができますhere