Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

extending React.Component vs Component

I just got in a project on React Native, where I constantly see classes extending both React.Component and Component itself.

Examples:

class SomeView extends React.Component

or

class OtherView extends Component

in both of them we are importing React, {Component} from React

Is there any actual difference, if so, which one? Didn't found any info on the web. Cheers!

like image 917
jbarradas Avatar asked Jul 11 '17 09:07

jbarradas


People also ask

What does extending a React component do?

Implement Inheritance in React Using the extends keyword, you can allow the current component to access all the component's properties, including the function, and trigger it from the child component.

Do you need to extend React component?

If you want to write a component that takes advantage of the lifecycle methods you will need to extend the default Component class. The Component class contains the lifecycle methods and should not be confused with other generic react components, such as functional components or any component you may write.

Which is better functional component or class component in React?

Performance differenceFunctional components show a greater performance than class components. The point used to measure this is the React functional element made of a simple object with the type(string) and props(object) 2 properties. Rendering such a component needs to call the function and passing props.

What is the extension of React component?

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”.


1 Answers

Well you can do whatever you want really.

Doing import { Component } from 'react' is effectively the same thing as React.Component.

The import { Component } from 'react' syntax is called a Named Import

The import statement is used to import bindings which are exported by another module.

import defaultExport from "module-name"; import * as name from "module-name"; import { export } from "module-name"; import { export as alias } from "module-name"; import { export1 , export2 } from "module-name"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; 
like image 86
João Cunha Avatar answered Oct 07 '22 08:10

João Cunha