reactjs - 禁用 antd Tree 的缓存

Question

我在 Antd - Tree 组件的文档中找到了这一点。

treeNode 的数量可以很大，但是启用 checkable 时会花费更多的计算时间，所以我们缓存了一些计算（例如 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'));