javascript - React 组件返回时实际发生了什么？

Question

我注意到组件返回前和返回后的数据存在差异。

class AComponent extends Component {
  render() {
    const body = <BComponent crmStatus={...}/>
    debugger // log body on the right
    // ... render as static html to electron window
    return false
  }
}

class BComponent extends Component {
  render() {
    const resultRender = <article className='large'>...</article>
    debugger // log resultRender on the left
    return resultRender
  }
}

我之前的问题是“How to read rendered component's className?”，但我将问题拆分为回答实际发生了什么以及为什么会这样真的开始困扰我，甚至可能给我提示解决我的问题。

那么问题是:

组件实际上发生了什么，为什么会这样？我的 render() 函数中可以有非常复杂的逻辑，但我想使用这些组件并不那么容易。

const headerContact = isContactInCRM ? <p>..</p> : <div>..</div>
const headerCallBtnsOrInfo = isSipEnabled && <div>..buttons..</div>
const callTimer = callDuration && <span>{callDuration}</span>
const footerNotes = <footer>..</footer>
const someImportedComponent = <MyComponent />

const resultRender = <section>
  {headerContact}
  {headerCallBtnsOrInfo}
  {callTimer}
  {footerNotes}
  {someImportedComponent}
</section>

// there is a difference in data between headerContact and someImportedComponent
// when traversing the resultRender's tree in console 

Answer 1

在回答这个问题之前，有必要了解一下什么是 JSX。它只是为 React.createElement(component, props, ...children) 提供语法糖功能。

<div>
  <MyComponent/>
</div>

例如，上面的 JSX 代码片段将在编译过程中转换为以下 JavaScript 代码。

React.createElement(
  "div",
  null,
  React.createElement(MyComponent, null)
);

您可以使用 Babel online repl tool 进行尝试.因此，如果我们使用普通 JavaScript 重写您的示例代码(在编译 JSX 之后)，它将是这样的。

class AComponent extends Component {
  render() {
    const body = React.createElement(BComponent, { crmStatus: '...' });
    debugger // log body on the right
    // ... render as static html to electron window
    return false
  }
}

class BComponent extends Component {
  render() {
    const resultRender = React.createElement('article',{ className: 'large' }, '...' );
    debugger // log resultRender on the left
    return resultRender
  }
}

通过查看上面的代码，我们可以理解<BComponent crmStatus={...}/>不会创建 BComponent 的新对象上课或调用render BComponent的方法| .它只是用 BComponent 创建一个 ReactElement类型和 crmStatus支柱。那么什么是 ReactElement？ ReactElement 是一个痛苦的 JavaScript 对象，具有一些属性。我推荐你阅读 this post from official React blog深入了解 React 组件、元素和实例。

An element is a plain object describing a component instance or DOM node and its desired properties. It contains only information about the component type (for example, a Button), its properties (for example, its color), and any child elements inside it.

基本上，您在控制台中打印的是两个不同类型的 React 元素。左边是描述类型为 'article' 的 DOM 节点。右边的是描述BComponent type React 组件实例。因此，您不能指望它们完全相同。

然后 React 在哪里创建 BComponent 的实例？ ？实际上，这发生在 React 代码内部。通常，我们无权访问这些实例或它们在我们的应用程序代码中的渲染方法返回的内容。

然而，React 仍然提供了一个名为 'refs' 的逃生 channel 。您可以显式访问子组件的实例。您或许能够使用该方法来解决您原来的问题。

希望这对您有所帮助!