爲antd樹禁用緩存

Question

我在Antd-Tree組件的文檔中發現了這個。

樹節點的數量可能非常大，但能辨認的時候， 將花費更多的計算時間，所以我們緩存一些計算（例如 this.treeNodesStates），以避免雙重計算。

本筆記建議樹狀態被緩存。當我從樹中添加/刪除節點時，樹似乎不會刷新。我應該如何禁用緩存或確保添加/刪除節點刷新樹？

Answer 1

您可以動態添加/刪除節點。看到這個codepen http://codepen.io/yesmeck/pen/JEjZmj?editors=001

const { Tree } = antd; 
const TreeNode = Tree.TreeNode; 

class Demo extends React.Component { 
    state = { 
    nodes: [ 
     { title: '1', key: '1' }, 
     { title: '2', key: '2' }, 
     { title: '3', key: '3' }, 
    ] 
    }; 

    handleAdd =() => { 
    const node = { title: (+new Date), key: (+new Date) } 
    this.setState({ nodes: [...this.state.nodes, node] }); 
    }; 

    handleRemove =() => { 
    this.setState({ nodes: this.state.nodes.slice(1) }); 
    }; 

    render() { 
    return (
     <div> 
     <Tree checkable defaultExpandAll> 
      {this.state.nodes.map(node => 
      <TreeNode title={node.title} key={node.key} /> 
     )} 
     </Tree> 
     <button onClick={this.handleAdd}>Add node</button> 
     <button onClick={this.handleRemove}>Remove node</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Demo />, document.getElementById('container'));