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

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

尝试用以下代码替换渲染：

SET @o_id := 2; -- your order id here

SELECT t.order_details FROM(
  SELECT orderid AS order_details, 1 AS order_by
  FROM orders
  WHERE orderid = @o_id
  UNION ALL
  SELECT productcode, 2 AS order_by FROM ordersdetaild
  WHERE orderid = @o_id
  UNION ALL
  SELECT productname, 3 AS order_by FROM ordersdetaild
  WHERE orderid = @o_id
)t
ORDER BY t.order_by, t.order_details;

并检查组件是否多次渲染。如果它没有，那么每次尝试添加另一块，直到找到问题为止。如果确实如此，则该组件不存在问题。它是造成这种情况的父组件。

就像你说的那样，绑定非常昂贵。所以绑定每个渲染是一个坏主意。你可以在施工时间绑定或使用箭头功能：
```
render() {
    console.log('Rendering Home...');
    return (<View />);
}
```
}
console.log价格昂贵，请确保在投入生产时将其删除。
mapDispatchToProps是多余的。你可以把它删除。

您可以阅读有关react-native performance here

的更多信息

React Native Render方法被称为3-5x

1 个答案: