组件什么时候卸载?

时间:2017-01-06 04:05:24

标签: javascript reactjs

我目前的理解是,当需要查看组件或路由需要该组件时,组件会安装到DOM上。它还将呈现其子组件。这是否意味着当您访问没有该组件的路径或者访问任何不显示该组件生成的元素的页面时,将卸载组件?因此,每当它出现在DOM(支柱和状态变化之外)时,需要重新安装一个组件,对吗?

5 个答案:

答案 0 :(得分:14)

VirtualDOM对帐期间,如果某个组件已存在但不再存在,则该组件将被视为已卸载并有机会进行清理(通过componentWillUnmount)。

反之亦然,在对帐期间,如果某个组件不存在,但现在确实如此,则该组件被认为已准备就绪,并且有机会自行准备(constructor / {{1} })

  

当拆除树时,旧的DOM节点被破坏。零件   实例接收componentWillUnmount()。在构建新树时,   新的DOM节点插入到DOM中。组件实例接收   componentWillMount()然后是componentDidMount()。任何州   与旧树相关的遗失了。

https://facebook.github.io/react/docs/reconciliation.html

如果你还没有,那个特定的页面非常值得一读。它还解释了为什么componentWillMount对于重复元素非常重要。

答案 1 :(得分:1)

仅当需要呈现组件时,组件才会安装在DOM上。如果更改路线或刷新页面,或者想在特定事件(例如onClick上显示/隐藏组件)上渲染组件,则将调用componentWillUnmount()并将组件从DOM中删除

答案 2 :(得分:0)

我想说一个组件只有在通过另一个组件(包括路由器组件)使用时才会挂载到DOM上。不要将路由器视为React中的特殊元素/事物。他们喜欢其他组件,他们在当前URL和他们必须通过Router的render()功能决定应该呈现哪个组件的模式之间进行匹配。每当URL发生变化时,路由器都会选择要渲染的新组件并通过render()函数进行渲染。

答案 3 :(得分:0)

简而言之,当一个组件已安装时,将调用componentDidMount(),而当该组件将要卸载时,将调用componentWillUnmount()。在重新渲染期间,如果既不安装也不卸载组件,则不会调用上述任何方法。取而代之的是,只需更新对组件代码所做的更改。

请记住,大多数React应用程序都是“单页应用程序”,这意味着它们仅更新现有页面,不会创建任何新页面,例如page1.html,page2.html。发生的事情是,React从page1卸载了不必要的组件,并安装了page2中描述的必要组件,使其看起来像page2。但这并没有真正“离开page1.html”,而是带您进入一个全新的页面,称为page2.html。它所做的只是在一个画布或页面中弹出并推送组件。换句话说,React将page2带入page1。但是画布保持不变(第1页)。

因此,您的问题的答案是,是的,当组件被删除或添加到页面时,该组件将被卸载并重新安装。

答案 4 :(得分:-6)

如果组件需要渲染,则应将其安装到DOM上。

如果没有,但在之前安装,如果应该卸载。