javascript - 我应该在 React 中遵循什么设计模式？

Question

我正在创建大约一千多个 svg 元素。当涉及到删除、更新或选择单个元素时，就时间而言是非常昂贵的。因为当我删除或更新特定的 svg 元素时，它会重新呈现 整个父节点及其中的所有子节点。这是添加元素和渲染的代码。

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')
    );

请提出一个可以解决我的问题的设计模式。因此，当我添加或删除元素时，父节点不必重新渲染，因为它包含数千个子节点。

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 操作，您确实需要访问它们。