React本机渲染方法被称为3-5x

我对React和React Native相当陌生，正在努力保持性能，因为Im正在使用它。React本机渲染方法被称为3-5x

我在某个地方看到将一个console.log(...)放入我的组件的方法中，这样我就可以看到它们被渲染的频率。

我为我的第一个用户看到的屏幕之一做了这个，我注意到它正在渲染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);

来源

2016-08-18 TheJediCowboy

shouldComponentUpdate – Sulthan

首先阅读[如何不使用道具绑定（https://daveceddia.com/avoid-bind-when-passing-props/ ） – stereodenis

除非我失去了一些东西，这段代码似乎没问题。也许它是调用这个导致多重渲染的组件？
我可以给你几个建议：

尝试更换渲染：
```
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

来源

2016-08-18 06:14:11 atlanteh

[不要在道具或构造函数中使用绑定]（https://daveceddia.com/avoid-bind-when-passing-props/）最好像这样使用'myFunction =（）=> {}没有任何困难 – stereodenis

React本机渲染方法被称为3-5x

回答

相关问题