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

我的工作，对最新动态web应用程序和我的一些代码： MainContainer.js：关于react.js条件渲染，或者react.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一些选项卡中，MainContainer变化source财产，这将导致不同的Guide渲染。（一些记录后，source没有变化在MainContainer）。

但是，此失败，Guide未能卸下。只有当用户点击Medium这种情况下renderContent()返回null可以Guide umount。

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

所以，我想补充key=在renderContent，我的意思是：

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

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

    }

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

来源

2017-08-25 吴环宇

文档中的相关部分：https：//facebook.github.io/react/docs/lists-and-keys.html，https://facebook.github.io/react/docs/reconciliation.html。尤其是：*“键帮助React识别哪些项目已更改，添加或删除。”* –

完整的文章。当你添加关键道具指南组件，并针对新源创建一个新的导向器部件（getInitialState方法应该在这种情况下被调用）并将卸载旧的组件，因为它不再由渲染功能返回。然而，当没有关键道具时，它会使用新的道具更新相同的组件（componentWillRecieveProp方法应该在本例中调用）。渲染方法使用新的道具返回相同的指南组件，因此不应该卸载。

来源

2017-08-25 17:04:03 NishiJain

是的！这是一些调试后的工作原理。我需要根据其道具获取Guide中的一些数据并将其存储在其状态中。我有两个选择。添加关键的道具，就像我在问题中所做的一样。2.在指导中覆盖componentWillReceiveProp以更新其状态以强制重新渲染。哪种方法更好？ –

我更喜欢第二种方式，因为它不会导致挂载和卸载。有什么建议么？ –

我也更喜欢第二种方式，因为这会导致现有组件的重新渲染。但是，使用密钥时，需要安装新组件并卸载旧组件。 – NishiJain

它在React的文档中，但本文从Tyler Mcginnis解释它。

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

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

重要的是每个键在兄弟姐妹中是唯一的。我们已经谈了几次关于和解的内容，并且这个和解过程的一部分是对一个新的元素树进行差异化处理，这是一个新的元素树。在处理列表时，Keys使这个过程更加高效，因为React可以使用子元素上的键快速知道元素是新的还是比较树时刚刚移动的元素。 不仅键使这个过程更有效率，但没有键，React无法知道哪个本地状态对应于正在移动的项目。因此，映射时不要忽略键。

您可以在这里找到React Interview Questions

来源

2017-08-25 16:52:01

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

回答

相关问题