Question

使用套接字监听服务器； Redux存储会不断更新数千条数据记录。存储的更新仅需几秒钟，数千个对象通过操作被调度。但是，使用redux connect函数通过mapStateToProps将状态映射到我的组件似乎使状态更改排队，并以每秒约7-10条记录的速度更新组件的状态。这意味着React组件需要花费很长时间才能渲染。有什么解决方案可以加快速度吗？另外，确切的数据量将始终在变化，并且没有固定的量。

这是我的组成部分：

class TestComponent extends Component {
  state = {};

  componentDidMount() {
    this.props.connectToSocket();
  }

  render() {
    const { classes, width, people, vehicles, incidents, locations } = this.props;

    return (
      <div>
         Hello
      </div>
    );
  }
}

TestComponent.propTypes = {
  classes: PropTypes.object.isRequired
};

const mapStateToProps = state => {
  console.log(state);
    return {
      people: state.live.people,
      vehicles: state.live.vehicles,
      incidents: state.live.incidents,
      locations: state.live.locations
    }
};

const mapDispatchToProps = {
  connectToSocket: connectToSocket
};

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

初始化套接字的操作在componentDidMount（）函数中执行。然后，我可以看到控制台中正在打印的状态，但是，它每秒会打印大约7-10条新记录的每个更新。由于在很短的时间内对存储进行了5000多次更新，因此将redux存储映射到组件的props花费的时间要长得多，并且渲染组件要花费5分钟以上的时间。

有什么想法吗？

Answer 1

通常，这里的答案涉及某种形式的批处理：

您可以分批处理来自套接字的数据，这样，您可以分派5个操作，每个操作具有N / 5个值，或者沿该行分配数据，而不是分派1个值的N个操作。
您可以使用各种批处理中间件之一或商店增强器来减少Redux订阅通知的数量。

有关进一步的想法和链接，请参见Redux FAQ entry on reducing the number of store update events。

redux / react映射状态到具有大量数据排队状态更新的props

1 个答案: