我應該在React中遵循什麼設計模式？

Question

我正在創建約1000多個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操作，則需要訪問它們。