antdのキャッシュを無効にするツリー

Question

Antd - Treeコンポーネントのドキュメントでこれが見つかりました。

のTreeNodeの数が非常に大きくなることができますが、チェック可能有効にすると、 それはより多くの計算時間を過ごすことになりますので、我々はダブルコンピューティングを避けるために、いくつかの計算（例えば。 this.treeNodesStates）がキャッシュされました。

このメモは、ツリー状態がキャッシュされていることを示しています。ツリーからノードを追加/削除すると、ツリーが更新されないように見えます。キャッシングを無効にする方法、またはノードの追加/削除によってツリーが更新されるようにする方法はありますか？

Answer 1

ノードを動的に追加/削除できます。このコードを参照してください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'));