在过去(换句话说,几年前)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 内部代码中执行此操作的特定部分,则可加分。
最佳答案
好吧,我想我已经最终找到了这个。函数式组件不作为构造函数调用——它们只是作为常规函数调用。
首先——如果我向组件添加一些调试
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);
/* ... */
}
关于javascript - React 函数式组件是常规函数还是构造函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66630621/