Reactjs 使用布线时重用组件实例

下面是一些示例代码：

<Switch>                          
   <Route path="/products" component={ProductDisplay} />
   <Route path="/suppliers" component={SupplierDisplay} />                         
</Switch>

---

因此，每次我单击链接切换时，都会创建一个新的

ProductDisplay

实例（我可以从日志消息中看出），但这不是非常低效，因为数据存储或组件的状态没有变化吗？我们如何重用

ProductDisplay

的实例？

使用like

JSX

标记函数回调而不是变量

<Switch>                          
   <Route path="/products" component={(props)=><ProductDisplay {...props}/>} />
   <Route path="/suppliers" component={(props)=><SupplierDisplay {...props}/>} />                         
</Switch>

} />
} />                         

React根据

key

属性（prop）决定是渲染还是重新渲染，请尝试修复

key

属性的值，并尝试为什么使用回调函数阻止创建新实例？最好检查

console.log

内部

componentDidMount

。如果仍然显示多次，最好使用

渲染

道具，而不是

中的
组件
<Switch>                          
   <Route path="/products" component={(props)=><ProductDisplay {...props}/>} />
   <Route path="/suppliers" component={(props)=><SupplierDisplay {...props}/>} />                         
</Switch>