react中render函数会被刷新多次，如何处理？

Question

在componentDidMount函数中有个调用后台接口方法，并把获取的数据设置到state中，当在render方法中输出this.state.data时，前两次会输出一个空，最后一次才会有后台的数据。请问下如何让它不render多次？
代码如下：

componentDidMount() {

    this.fetch();

}

fetch = (params = {}) => {
    console.log('params:', params);
    this.setState({ loading: true });
    reqwest({
      url: 'https://randomuser.me/api',
      method: 'get',
      data: {
        results: 10,
        ...params,
      },
      type: 'json',
    }).then(data => {
      const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
      pagination.total = 200;
      this.setState({
        loading: false,
        data: data.results,
        pagination,
      });
    });
  };


render() {

    console.log(this.state.data);



    return (

        <Table

            columns={columns}

            rowKey={record =>  record.login.uuid}

            dataSource={this.state.data}

            pagination={this.state.pagination}

            loading={this.state.loading}

            onChange={this.handleTableChange}

        />

    );

}

输出截图：

详细代码：https://codesandbox.io/s/cranky-moon-ubm0l

Answer 1

这种方式无法避免，是必须得render3次的
初始化一次，请求数据前的loading一次，数据返回后又一次

Answer 2

这种情况无需在意，你只需要关注初始无数据状态UI是否正常和数据正常返回的UI是否正常，至于执行很多遍，在diff的时候，只要节点树没有变化，并不会渲染多次，但是render会执行多次。

Answer 3

memo 可以帮助你减少不必要的更新.

import React, { memo } from 'react';

export default memo('你的组件名');