Question

我正在处理新闻Feed网络应用程序和我的一些代码： MainContainer.js：

renderContent(source) {
        let content;
        switch (source) {
            case 'bbc':
            case 'cnn':
            case 'reuters':
                content = <Guide  source={source}/>;
                break;
            case 'medium':
                content=null;
                break;
            default:
                content = null;
                break;
        }

        return content;
    }
    render() {
        let {source} = this.props;
        return this.renderContent(source);

    }

这是来自MainContainer的代码，它是一个容器组件，用于从CNN或BBC呈现不同的新闻。它的包装器组件是App

App.js render()

 <div>
      <ScrollableTab sources={sources} handleChange={this.handleSwitchTag.bind(this)} current={current}/>
      <MainContainer source={sources[current].toLowerCase()}/>
 </div>

当用户点击ScrollableTab中的某个标签时，source的{{1}}属性会发生变化，这将导致不同的MainContainer呈现。（经过一些记录后，{ {1}} Guide}确实发生了变化。

但是，失败，source无法卸载。只有当用户点击MainContainer时Guide返回null，才能Medium umount。

我想，这可能是因为React.js无法消除类似的组件并进行一些优化，它认为不需要卸载实际上不同的“相同”组件。

所以，我在renderContent()中添加了Guide，我的意思是：

key=

通过这种方式，它的工作原理。但我在React.js的文档中找不到任何解释。或者我只是错过了一些docs.Can有人告诉我这是一个错误还是过度优化？

Answer 1

它出现在React的文档中，但Tyler Mcginnis的这篇文章解释了它。

当调用setState时，React将做的第一件事是将传递给setState的对象合并到组件的当前状态。这将启动一个名为对帐的流程。协调的最终目标是以最有效的方式根据此新状态更新UI。为此，React将构造一个新的React元素树（您可以将其视为UI的对象表示）。一旦它有了这个树，为了弄清楚UI应该如何响应新状态，React会将这个新树与前一个元素树区分开来。

密钥可帮助React跟踪哪些项目已更改，已添加或已从列表中删除。

每个键在兄弟姐妹中都是独一无二的。我们已经讨论了几次关于和解的问题，并且这个和解过程的一部分正在执行一个新元素树与最前一个元素树的差异。在处理列表时，键使此过程更有效，因为React可以使用子元素上的键来快速了解元素是否为新元素，或者在比较树时是否仅移动了元素。 不仅密钥使这个过程更有效率，而且没有密钥，React无法知道哪个本地状态对应于移动中的哪个项目。因此，在映射时永远不要忽略键。

您可以在此处找到完整的文章React Interview Questions

Answer 2

当您向Guide组件添加key prop时，它会为每个新源创建一个新的Guide组件（在这种情况下应该调用getInitialState方法），并且将卸载旧组件，因为它不再由render函数返回。但是，当没有key prop时，它会使用新的prop更新相同的组件（在这种情况下应该调用componentWillRecieveProp方法）。具有新prop的render方法返回相同的Guide组件，因此不应卸载。

关于react.js条件渲染，还是react.js中的潜在错误？

2 个答案: