Instance in React

Question

Can someone helps me in understanding wether this will be classified as instance.

So if i got the general definition correct, This would an instance be an instance of a function in javascript

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

//Creating an instance 
var myFather = new Person("John", "Doe", 50, "blue");

Now In react, Consider our App.js file in React

import React, { Component } from "react";
import Ccockpit from "../components/cockpit/cockpit.js";

class App extends Component {
  //State

  //All the handlers

  //Render
  render() {
    return (
      <Ccockpit
        coatiitle={this.props.title}
        cocPersonState={this.state.showPerson}
        cocperson={this.state.person.length}
        toggler={this.togglerPersonHandler}
        login={this.loginHandler}
      >
        {person}
      </Ccockpit>
    );
  }
}

Here will <Ccockpit be considered as instance of our App?

You are creating an instance of Ccockpit so yes. you could create multiple Ccockpit elements in your code, each being an instance. — Mike Cheel
– Mike Cheel, Commented May 23, 2018 at 13:40
I would rather say instance constructed with the function, but in the react example you technically don't construct Ccockpit you just pass it to react and react does that for you. So <Ccockpit /> is "kind of an instance" of Ccockpit — Jonas Wilms
– Jonas Wilms, Commented May 23, 2018 at 13:49
Yes. React will call the constructor on your React class: reactjs.org/docs/react-component.html#constructor — lux
– lux, Commented May 23, 2018 at 14:06
Cockpit is not an instance of App, it's just something that App renders (the result of the Ccockpit render function). However the Cockpit object is instantiated under the hood as React render's your app. And just call it Cockpit, we don't tend to do a C prefix in JavaScrpt, and in React we sometimes change components between classes and functions (a component can be a function not just a class) — nanobar
– nanobar, Commented May 23, 2018 at 14:08

Tomasz Mularczyk · Accepted Answer · 2018-05-23 19:02:10Z

Here will Ccockpit be considered as instance of our App?

Just for clarification - you are using JSX syntax which is later transpiled by Babel and used by React to create instances of your Objects. This:

class ComponentOne extends React.Component {
  render() {
    return <p>Hello!</p>
  }
}

const ComponentTwo = () => <p>Hello!</p>

function ComponentThree() {
  return (
    <div>
      <ComponentOne />
      <ComponentTwo />
    </div>
  )
}

<ComponentThree />

will be transpiled to this:

class ComponentOne extends React.Component {
  render() {
    return React.createElement(
      "p",
      null,
      "Hello!"
    );
  }
}

const ComponentTwo = () => React.createElement(
  "p",
  null,
  "Hello!"
);

function ComponentThree() {
  return React.createElement(
    "div",
    null,
    React.createElement(ComponentOne, null),
    React.createElement(ComponentTwo, null)
  );
}

React.createElement(ComponentThree, null);

An instance is a concrete Object in memory.

const a = {};
const b = {};
const c = {};

a, b and c are Object instances. They have their own space taken in memory. In other words:

<Ccockpit />
<Ccockpit />
<Ccockpit />

this will create three Object instances constructed with Cockpit constructor.

Collectives™ on Stack Overflow

Instance in React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related