javascript - How does React know if a function component is a React component? - Stack Overflow

admin管理员组

文章数量:1398811

React supports both class and function ponents. All React files have an import React from ‘react’ statement at the top. When creating a class ponent (like so: class MyClassComponent extends React.Component ...), there is an explicit mention of which class this class instance extends from. However, when declaring a function ponent (const MyFunctionComponent = () => ()), it isn’t being explicitly said “hey this is a React ponent by the way.”

For all we know, this could be a function in plain JavaScript. How then, does React recognize functions as function ponents?

React supports both class and function ponents. All React files have an import React from ‘react’ statement at the top. When creating a class ponent (like so: class MyClassComponent extends React.Component ...), there is an explicit mention of which class this class instance extends from. However, when declaring a function ponent (const MyFunctionComponent = () => ()), it isn’t being explicitly said “hey this is a React ponent by the way.”

For all we know, this could be a function in plain JavaScript. How then, does React recognize functions as function ponents?

• javascript
• reactjs

Share Improve this question Follow asked Apr 9, 2018 at 13:16 jsdev17jsdev17 1,11033 gold badges1616 silver badges2525 bronze badges 1

• 1 "The simplest way to define a ponent is to write a JavaScript function." If the function accepts at least a single prop, then React will recognize it as a functional ponent. Source: reactjs/docs/ponents-and-props.html – Ralph David Abernathy Commented Apr 9, 2018 at 13:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here is the code for the isValidElement() function. In a nutshell, they check if it is an object (functions are objects) with a $$typeof of the REACT_ELEMENT_TYPE Symbol.

Beyond that though, it doesn't really matter if it is a normal function or not. For the most part, even if I make some random function, as long as it has a render() function, it'd be usable as a React element. I'm not sure if they have checks for missing lifecycle functions or not, but if they do, then it would work (if they don't, it'd throw errors).

When it es to JavaScript "inheritence", it always just boils down to if the shape of the object matches the expected shape.

It doesn't do that, every function is valid, if it returns a valid type. However, React doesn't check statically if a function will return something valid, so it just runs it, if it's a function. In newer React versions the return value can be nearly everything. Arrays work now, strings also. Currently React does support the following types as return values:

• React elements. Typically created via JSX. An element can either be a representation of a native DOM ponent (), or a user-defined posite ponent ().
• String and numbers. These are rendered as text nodes in the DOM.
• Portals. Created with ReactDOM.createPortal.
• null. Renders nothing.
• Booleans. Render nothing. (Mostly exists to support return test && pattern, where test is boolean.)
• Fragment (array of valid elements)

So, unless you don't return undefined, it should work, but as said, it will execute it always if it is a function.

But it IS a plain javascript function. It simply return a value which is then interpreted by React.

Edit: To help you understand, you need to keep in mind that in JavaScript EVERYTHING (except of course primitive types) are objects (Classes, Functions, Arrays, etc) are at the end all the same.

本文标签： javascriptHow does React know if a function component is a React componentStack Overflow