reactjs - React Router组件和渲染之间的区别

Question

我真的不明白React路由器中的Route中的渲染和组件 Prop 之间的区别，在文档中它说渲染不会创建新元素，但组件会创建新元素，我试图回顾历史，但我发现 componentWillMount 是当我在 Route 中使用 render 时调用，它们是什么意思“如果为组件属性提供内联函数，则每次渲染都会创建一个新组件。这会导致现有组件卸载并安装新组件，而不仅仅是更新现有组件。”

Answer 1

The source code说出区别:

if (component)
  return match ? React.createElement(component, props) : null

if (render)
  return match ? render(props) : null

当您使用 component 属性时，每次调用 Route#render 都会实例化该组件。这意味着，对于传递给 Route 的 component 属性的组件，构造函数、componentWillMount 和 componentDidMount 将在每次路由时执行已渲染。

例如，如果您有

<Route path="/:locale/store" component={Store} />

并且用户导航到/en/store，然后转到其他地方，然后导航回/en/store，Store组件将被安装，然后卸载，然后再次安装。这与做类似

<Route path="/:locale/store">
  <Store />
</Route>

相比之下，如果您使用 render 属性，则组件会在每个 Route#render 上评估。还记得每个组件都是一个函数吗？该函数将按原样执行，没有任何生命周期方法。所以当你拥有它时

<Route path="/:locale/store" render={Store} />

你可以把它想象成

<Route path="/:locale/store">
  {Store()}
</Route>

它可以节省运行时间，因为没有运行生命周期方法，但它也有一个缺点，以防 Store 组件具有一些挂载后生命周期方法(例如 shouldComponentUpdate)，这也可能会提高性能。

<小时/>

有a good post on Medium about this performance hack ，请看一下。它写得很好，也适用于 React 16。