Javascript React功能组件是常规函数还是构造函数?

Javascript React功能组件是常规函数还是构造函数?,javascript,reactjs,object,Javascript,Reactjs,Object,在古代(换句话说,几年前),React组件是使用render方法的类 class MyComponents extends React.Component { render() { return <div>...</div> } } 或者,您可以使用javascript函数创建新对象 function SomeFunction() { //... } const object = new SomeFunction()

在古代(换句话说,几年前),React组件是使用
render
方法的类

class MyComponents extends React.Component {
    render() {
        return <div>...</div>
    }
}
或者,您可以使用javascript函数创建新对象

function SomeFunction() {
    //...
}

const object = new SomeFunction()        
在纯javascript中,通常约定
大写的函数是构造函数,而非构造函数是常规函数。然而,我读到的许多关于组件的浅薄博客文章都指出(但从未明确指出)这些组件函数被用作常规函数,而不是对象构造函数


这里有没有人知道函数组件是对象构造函数、常规函数,还是React在幕后做了第三件奇怪的事情。如果您能指出React内部代码中执行此操作的特定部分,则可获得额外积分。

好的,我想我已经找到了这一点。函数组件不作为构造函数调用——它们只是作为常规函数调用

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

    function MyComponent() {
        /* ... */
        console.log(this)
        /* ... */
    }
的值未定义。这与作为函数调用MyComponent的代码是一致的。如果调用代码
newmycomponent
将是
MyComponent
对象的实例

第二,如果我读对了源代码,那么React似乎有一个分支逻辑,用于处理基于类和基于函数的组件

function MyComponent() {
    return <div>...</div>
}
基于类的组件,但不是

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

有趣的问题。我还没有找到正确的行,但是调用了带有注释“Factory method to create a new React element.这不再符合类模式,因此不要使用new来调用它。此外,instanceof check将不起作用。”React不会将函数组件作为构造函数调用。你可以这么说,因为箭头函数作为函数组件是完全合法的,但作为构造函数它们是不合法的。谢谢@NicholasTower——当你说“箭头函数作为函数组件是完全合法的”——这是在任何地方记录的,还是只是一种常见的做法(我并不怀疑你是对的,我只是对React的这一部分比较陌生,并尝试尽可能多地学习)谢谢@LindaPaiste-这些都是有用的代码点,可以从中开始探索。“这不再遵循类模式,所以不要使用new来调用它。”如果有旁证的话,是很有说服力的。@是的,它没有直接回答您的问题,但它证明React使用大写名称来表示非类且不可
新建的事物。
    function MyComponent() {
        /* ... */
        console.log(this)
        /* ... */
    }
    if (isClass) {
      inst = new Component(element.props, publicContext, updater);
      /*...*/
    } else {
      /* ... */
      inst = Component(element.props, publicContext, updater);
      /* ... */
    }