[英]Are React Functional Components Regular Functions or Constructor Functions?
In olden times (in other words, a few years ago) React Components were classes with a render
method.在过去(换句话说,几年前)React 组件是具有
render
方法的类。
class MyComponents extends React.Component {
render() {
return <div>...</div>
}
}
In more recent times, React's introduced functional components.最近,React 引入了函数式组件。
function MyComponent() {
return <div>...</div>
}
Either of the above would let you use your component in another bit of JSX -- something like this以上任何一个都可以让你在另一个 JSX 中使用你的组件——像这样
<Navigation>
<MyComponent/>
</Navigation>
I'd like to know if, behind the scenes, React is using these functional component functions as object constructors or is it just calling the component function as a regular function.我想知道,在幕后,React 是使用这些功能组件函数作为 object 构造函数,还是只是将组件 function 作为常规 ZC1C425268E68385D1AB5074C17A94F1 调用。
That is -- you can call a javascript function也就是说——你可以调用 javascript function
function someFunction() {
//...
}
const result = someFunction()
Or, you can use a javascript function to create a new object或者,您可以使用 javascript function 创建一个新的 object
function SomeFunction() {
//...
}
const object = new SomeFunction()
In plain javascript the convention is usually that a function that's Capitalized
is a constructor function, and function that's not is a regular function. In plain javascript the convention is usually that a function that's
Capitalized
is a constructor function, and function that's not is a regular function. However, a lot of the shallow blog articles I read on components indicate (but never state outright) that these component functions are used as regular functions and not as object constructors.然而,我读到的很多关于组件的浅薄博客文章都表明(但从来没有直接提到 state)这些组件函数被用作常规函数,而不是object 构造函数。
Does anyone here know whether functional components are object constructors, regular functions, or if React's doing some third weird thing behind the scenes.这里有谁知道函数组件是 object 构造函数、常规函数,还是 React 在幕后做了第三件奇怪的事情。 Bonus points if you can point out the particular bit(s) of React's internal code that's doing this.
如果你能指出 React 内部代码中执行此操作的特定位,则可以加分。
OK, I think I've tracked this one down conclusively.好的,我想我已经最终找到了这个。 Functional Components are not invoked as constructor-functions -- they're just called as regular function.
功能组件不作为构造函数调用——它们只是作为常规 function 调用。
First -- if I add some debugging to a component首先——如果我向组件添加一些调试
function MyComponent() {
/* ... */
console.log(this)
/* ... */
}
the value of this
is undefined. this
的值是未定义的。 That's consistent with code calling MyComponent
as a function.这与将
MyComponent
调用为 function 的代码一致。 If code invoked new MyComponent
, this
would be an instance of a MyComponent
object.如果代码调用
new MyComponent
, this
将是MyComponent
object 的一个实例。
Second, if I'm reading the source right, it looks like this conditional is one place where React has branching logic for dealing with class-based vs. function-based components.其次,如果我正确地阅读了源代码,看起来这个条件是 React 具有处理基于类和基于函数的组件的分支逻辑的一个地方。
A class based component gets the new
treatment , but a function based component does not.基于 class 的组件得到
new
的处理,但基于 function 的组件没有。
if (isClass) {
inst = new Component(element.props, publicContext, updater);
/*...*/
} else {
/* ... */
inst = Component(element.props, publicContext, updater);
/* ... */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.