What is the difference between a React component and an instance of a React component?

Question

I read it and he says:

When a component is purely the result of only props, no state, the component can be written as a pure function, avoiding the need to create an instance of the React component .

What is the difference between a component and a component instance?

They are the same?

EDIT:

• What is the difference between Component and Component Instance ?

• How do they relate to each other?

• Conceptually?

• How are they represented in computer memory? How is the performance different?

• What is a component and what is an instance of this component? (In memory.) What is a JS object?

• In what sense? Object oriented meaning?

• Is it true that each component can have (one or more instances)?

• How many instances can a component have?

• Does it make sense to say that an instance can be created for each reacting component?

• How do component instances react and how are components created?

Reason for request:

I am trying to create a conceptual map that responds to clarification of terminology and how they relate to each other.

Here is a draft:

Answer 1

The main difference is that when it is Component , React will run / add all life cycle methods . This will be useful if in your state component. When you use this component, React will create a React Component Instance to which all lifecycle methods and other hooks will be added.

 class App extends React.Component{ ... } 

In some cases, you will not use state . In these cases, the addition of all these life cycle methods is not required. So, React gives you a way to create a component that will only have render . It is called PureComponent . When you use this, there is no need to create a new Component Instance , because there are no life cycle methods. It will just be a function that can take props and return React elements.

 class App extends React.PureComponent{ ... } 

Hope this helps!

[Update]

What is Component and << 27>?

Technically, a Component in React is a class or function .

Example:

 class App extends React.Component{ ... } //stateless component const App = (props) => { ... } 

When you use this Component , it will be created, more like a new App() . But, React does it himself differently.

Example:

 render(){ return <App/> //Instance of the component App } 

Instances are required because each instance can execute individually. Instances are a copy of the original class.

The simple answer is: components will be a class , and the Component Instance will be a copy / instance of the class and will be used in render

Hope this will explain!

Answer 2

To answer the question:

When a component is purely the result of only props, no state, the component can be written as a pure function, avoiding the need to instantiate the React component.

An instance of the React component simply uses the classes to instantiate the React component. See the Example below (es6 / JSX), which contains both props and state:

 class MyComponentInstance extends React.Component { constructor(props) { super(props); // set initial state this.state = { example: 'example' }; } render() { return <div> <div>{this.state.example}</div> <div>{this.props.example}</div> </div>; } } 

If you do not need a state in your component, you can use a pure, functional, stateless reactive component:

 function MyStatelessFunctionalComponent(props) { return <div>{this.props.example}</div>; } 

The following is additional information about components without regard to the state when they were introduced in React 0.14. https://medium.com/@joshblack/stateless-components-in-react-0-14-f9798f8b992d#.yv0zxjxr5

Update: As mentioned in some other comments, and here, in particular, performance benefits when using stateless components ...

Since there are no ways of state or life cycle, the React team plans to avoid unnecessary checks and memory allocation in future releases.

https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.ttiirkcf4