javascript - React 函数式组件是常规函数还是构造函数？

Question

在过去(换句话说，几年前)React 组件是带有 render 方法的类。

class MyComponents extends React.Component {
    render() {
        return <div>...</div>
    }
}

最近，React 引入了函数式组件。

function MyComponent() {
    return <div>...</div>
}

以上任何一个都可以让你在另一个 JSX 中使用你的组件——就像这样

<Navigation>
    <MyComponent/>
</Navigation>    

我想知道，在幕后，React 是否将这些函数式组件函数用作对象构造函数，还是只是将组件函数作为常规函数调用。

也就是说——你可以调用一个javascript函数

function someFunction() {
    //...
}

const result = someFunction()

或者，您可以使用 javascript 函数创建一个新对象

function SomeFunction() {
    //...
}

const object = new SomeFunction()        

在普通 javascript 中，约定 通常是大写 的函数是构造函数，而不是大写的函数是常规函数。然而，我读到的许多关于组件的浅薄博客文章表明(但从未直截了本地说明)这些组件函数用作常规函数，不用作对象构造函数。

这里有谁知道函数式组件是对象构造函数、常规函数，还是 React 在幕后做了一些奇怪的事情。如果您能指出 React 内部代码中执行此操作的特定部分，则可加分。

Answer 1

好吧，我想我已经最终找到了这个。函数式组件不作为构造函数调用——它们只是作为常规函数调用。

首先——如果我向组件添加一些调试

    function MyComponent() {
        /* ... */
        console.log(this)
        /* ... */
    }

this 的值未定义。这与将 MyComponent 作为函数调用的代码一致。如果代码调用了 new MyComponent，this 将是 MyComponent 对象的一个​​实例。

其次，如果我正确阅读源代码，它看起来像 this conditional是 React 具有处理基于类和基于函数的组件的分支逻辑的地方。

基于类的组件 gets the new treatment , 但是 a function based component没有。

    if (isClass) {
      inst = new Component(element.props, publicContext, updater);
      /*...*/
    } else {
      /* ... */
      inst = Component(element.props, publicContext, updater);
      /* ... */
    }