Question

我正在使用Reflux.connectFilter mixin让一堆Graph组件监听我的GraphStore中的更改。使用过滤器时，只有当GraphStore图形中与其ID匹配的元素中的元素发生更改（或添加/删除）时，才应重新呈现它们。但是，当我更新数组的单个元素时，例如通过设置名称变量，我仍然看到所有监听的图形都重新渲染。我做错了吗？

GraphStore

var Reflux       = require('reflux');
var GraphActions = require('./graphActions').GraphActions;

var GraphStore = Reflux.createStore({
  listenables: [GraphActions],
  init: function() {
    this.graphs         = [];
    this.metricMetaData = {};
  },
  onAddGraph: function(graphId, name) { // Called only by the Dashboard component that is a parent to all Graphs
       this.graphs.push(
          {
             id:   graphId,
             name: ""
          }
       );

       this.updateGraphs();
  },
  onSetName: function(graphId, name) { // Called only by the Dashboard component that is a parent to all Graphs
     for(var i = 0, gl = this.graphs.length; i < gl; ++i) {
        if(this.graphs[i].id === graphId) {
           this.graphs[i].name = name;
           this.updateGraphs();
           return;
        }
     }
  },
  ...
  updateGraphs: function() {
    this.trigger(this.graphs); // This is the only place in the store where trigger is called
  },
  getInitialState: function() {
    return this.graphs;
  }
});

module.exports = {GraphStore: GraphStore};

图形

/** @jsx React.DOM */
var React        = require('react');
var Reflux       = require('reflux');
var GraphActions = require('./graphActions').GraphActions;
var GraphStore   = require('./graphStore').GraphStore;

var Graph = React.createClass({
  mixins: [Reflux.connectFilter(GraphStore, "graph", function(graphs) {
    return graphs.filter(function(graph) {
      return graph.id === this.props.id;
    }.bind(this))[0];
  })],
  propTypes: {
    id: React.PropTypes.string.isRequired
  },
  ...
  render: function() {
    if(typeof this.state.graph === "undefined") {
       return (<div>The graph has not been created in the store yet</div>);
    } else {
       return (<div>Graph name: {this.state.graph.name}</div>);
    }
  }
};

module.exports = {Graph: Graph};

控制台

/** @jsx React.DOM */
var React        = require('react');
var Graph        = require('./graph').graph;
var GraphActions = require('./graphActions').GraphActions;
var UUID         = require('uuid');    

var Dashboard = React.createClass({
  propTypes: {
    numGraphs: React.PropTypes.int.isRequired
  },
  ...
  render: function() {
    var graphs = [];
    for(var i = 0; i < this.props.numGraphs; ++i) {
        var currId = UUID.v4();
        GraphActions.addGraph(currId, "");
        graphs.push(<Graph id={currId} />);
    }

    return (<div>{graphs}</div>);
  }
};

module.exports = {Dashboard: Dashboard};

Answer 1

我还没有使用过Reflux，但我认为这里的问题是所有Graph个实例都在监听GraphStore，并且只要该商店发送一个事件，所有组件实例将收到该事件。他们将过滤掉他们不感兴趣的数据，但Reflux仍会在所有实例上调用setState，触发它们重新渲染。如果过滤功能的结果与以前相同，则反流不会（据我所知）短路重新渲染。

为了使其短路并避免在获得相同数据时重新呈现，您需要在组件上实现shouldComponentUpdate方法并将新状态与旧状态进行比较，如果＆和，则返回false ＃39;是一样的。

一种流行的方法是将[1] Immutable.js与[2] PureRenderMixin一起使用，它会为你做短路。

[1] https://github.com/facebook/immutable-js

[2] https://facebook.github.io/react/docs/pure-render-mixin.html

Reflux connectFilter仍然向所有监听组件发送更新

1 个答案: