Javascript 如果我将一个组件作为道具传递，它什么时候被渲染？

我有一份申请。在我的应用程序中，我通常希望我的视图组件不直接导入其他组件。相反，我希望视图的父容器组件负责收集依赖项并通过道具将它们注入视图

这通常是这样的：

// 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>
)

//Container.js
从“/somewhere”导入其他组件
从“./View”导入视图
类容器扩展了React.Component{
render（）{
返回(
)
}
}
//View.js
const View=props=>(
{props.component}
)

但请注意，当作为道具传递给视图时，SomeOtherComponent似乎是如何实例化的

这是否意味着在创建视图之前，会实例化其他组件（因此会遍历其所有相关的生命周期方法）

---

或者只有在实例化视图并调用视图的呈现方法时，其他组件才会实例化？

构造函数和呈现方法的运行顺序正确。

组件didmount

按照您的描述运行

---

请参见

中的日志，这取决于“实例化”的含义<代码>被传输到

React.createElement（SomeOtherComponent，null）

，所以如果实例化意味着调用React.createElement，那么它将在容器的呈现过程中发生

然而，我不认为这是一件值得关注的有意义的事情。React.createElement所做的只是生成一个小对象来描述要渲染的内容。该对象大致如下（我省略了一些内容）：

仅仅创建这些对象的行为不会导致任何组件被安装或经历生命周期。相反，它们必须由呈现函数返回。更重要的是，在您的例子中，容器不是将其作为要渲染的对象返回，而是作为要传递的道具返回。所以在容器调用render之后，react将看到它应该装载一个视图。它是这样做的，作为道具从上方传入对象。然后，这个新装入的视图进行渲染，作为渲染的一部分，它最终返回对象。只有在这一点上才能安装该组件

---

因此，如果“实例化”表示“已装入”，那么它将首先装入容器，然后装入视图，然后装入SomeOther组件。其他组件首先完成安装，然后视图完成，然后容器完成。

当您显示相应视图时，它将被实例化。发生这种情况是因为组件对DOM中的渲染做出反应，而不仅仅是导入它。 在下一个示例中，如果从App的render方法中删除“{component}”，则不会初始化NotUsedComponent，也不会调用componentDidMount中的console.log

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


class NotUsedComponent extends React.Component {
  componentDidMount() {
    console.log("NotUsedComponent is mounted");
  }
  render() {
    return <div />;
  }
}


function App() {
  const component = <NotUsedComponent />;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {component}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类NotUsedComponent扩展React.Component{
componentDidMount（）{
log（“安装了NotUsedComponent”）；
}
render（）{
返回；
}
}
函数App（）{
常数分量=；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{component}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

因此，无渲染-无初始化。

不要传递组件周围有

。这就是导致实例化的原因。将“已创建”组件作为道具传递还是未创建（即

）更好，以便在

视图中实际创建
其他组件
？
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


class NotUsedComponent extends React.Component {
  componentDidMount() {
    console.log("NotUsedComponent is mounted");
  }
  render() {
    return <div />;
  }
}


function App() {
  const component = <NotUsedComponent />;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {component}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);