我应该在React中遵循什么样的设计模式？

Question

我创造了超过一千个svg元素。 在删除，更新或选择单个元素时，它在时间上非常昂贵。 因为当我删除或更新特定的svg元素时，它会re-renders整个父节点，其中包含所有数十亿个子节点。 这是添加元素和渲染的代码。

var App = React.createClass({
  getInitialState: function() {
    return {
      propsList: []
      };
   },
  addProps: function(props) {
    var propsList = this.state.propsList.concat([props]);
      this.setState({ propsList: propsList });
        },
  render: function() {
    var components = this.state.propsList.map(function(props) {
      return React.createElement('g', props);
        });
    return React.createElement('div', null, components);
      }
  });
  ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('svg')
    );

请建议一个可以解决我的问题的design pattern 。 因此，当我添加或删除元素时，父节点不必re-render因为它包含数千个子节点。

Answer 1

您可以尝试缓存元素的渲染，如果它们的渲染确实是减慢应用程序速度的部分：

var App = React.createClass({

  getInitialState: function() {
    return {
      cachedElements: [],
      propsList: []
    };
  },

  addProps: function(props) {
    var propsList = this.state.propsList.concat([props]);
    var cachedElements = this.state.cachedElements.concat([
      React.createElement('g', props)
    ])
    this.setState({ 
      cachedElements: cachedElements,
      propsList: propsList 
    });
  },

  render: function() {
    return React.createElement('div', null, this.state.cachedElements);
  }
});

我没有从状态中删除propsList，如果它没有用于渲染组件，你应该这样做。 您可以使用模块变量或组件属性，或者只是在不需要同时访问所有项目时将其完全删除 - 但我想如果您想要完整的CRUD操作，则需要访问它们。