gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:56:40 24 4
gpt4 key购买 nike

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

最佳答案

The source code说出区别:

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

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

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

例如,如果您有

<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。

关于reactjs - React Router组件和渲染之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48150567/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com