我有一个React应用程序。在我的应用中,我通常希望我的视图组件不要直接导入其他react组件。相反,我希望视图的父容器组件负责收集依赖项,并通过prop将其注入视图。
通常如下所示:
// Container.js
import SomeOtherComponent from '/somewhere'
import View from './View'
class Container extends React.Component {
render() {
return(
<View
component={<SomeOtherComponent/>}
/>
)
}
}
// View.js
const View = props => (
<div>
{props.component}
</div>
)
但是请注意,当作为支持传递给View时,SomeOtherComponent看起来是如何被实例化的。
这是否意味着在View之前实例化SomeOtherComponent(因此要经历所有相关的生命周期方法)?
还是只在实例化View并调用View的render方法时实例化SomeOtherComponent?
最佳答案
这取决于您“实例化”的意思。 <SomeOtherComponent/>
被转换为React.createElement(SomeOtherComponent, null)
,因此如果实例化意味着调用React.createElement,则它将在Container的渲染期间发生。
但是,我认为这不是一件非常有意义的事情。 React.createElement所做的只是生成一个描述要渲染内容的小对象。该对象将大致像这样(我省略了一些东西):
{
type: SomeOtherComponent,
props: null,
key: null,
ref: null,
}
创建这些对象的简单动作不会导致任何组件的安装或经历生命周期。相反,它们必须由render函数返回。在您的情况下,更重要的是,Container不是将其作为渲染对象返回,而是作为传递的道具。因此,在Container调用render之后,react将看到它应该挂载一个View。它这样做是从上方将对象作为道具传递。然后,此新安装的视图将呈现,并作为其一部分最终返回对象。仅在这一点上,反应才会安装该组件。
因此,如果“实例化”表示“已安装”,则它将首先开始安装容器,然后是视图,然后是SomeOtherComponent。 SomeOtherComponent首先完成安装,然后完成View,然后完成Container。
关于javascript - 如果我将组件作为 Prop 传递,则何时渲染?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56450487/