我有一个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/

10-12 12:32
查看更多