React Native 渲染方法被调用 3-5x

Question

我对 React 和 React Native 还很陌生，并且在使用它时我会努力牢记性能。

我在某处读到，将console.log(...) 放入我的组件的render(...) 方法中是个好主意，这样我就可以看到它们被渲染的频率。

我在用户看到的第一个屏幕上做了这个，我注意到它立即渲染了 3 到 4 次。

这个方法的代码定义如下，只渲染3个部分。

下面的代码中是否有任何内容不正确或以非性能方式完成，我应该采取不同的做法？例如，我在几个地方读到我绑定回调的方式不正确，并且会注册多次（每次渲染完成）。

另外，render(...) 多次执行是否正常或正常，还是可以避免？

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

除非我遗漏了什么，否则这段代码似乎没问题。也许是调用这个的组件导致了多次渲染？
我可以给你一些建议：

• 尝试将渲染替换为：

  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 是多余的。你可以删除它。

您可以阅读有关 react-native 性能的更多信息here