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

你可以尝试缓存元素的渲染，如果它们的渲染真的是减慢你的应用程序的部分：

function   palindrom(slovo:string):boolean;
var slovofor: string;
    slovorev: string;
    i: integer;
begin
    for i:= length(slovo) downto 1 do begin
      if slovo[i] <> ' ' then begin
        slovofor := slovofor + slovo[length(slovo)-i+1];
        slovorev := slovorev + slovo[i];
      end;
    end;
    writeln(slovofor);
    Result := slovofor = slovorev
end;

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

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

1 个答案: