Constructor in JavaScript/React is required?

Question

This code is requiring a constructor. I'm not understanding the need to have a constructor to use the 'this' (Eu não estou entendendo a necessidade de ter um construtor para usar o 'this')

import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';


class Botao extends Component{

this.styles = StyleSheet.create({}); // requiring a constructor

render(){
    return(
        <TouchableOpacity>
            <View>
                <Text>Clique</Text>
            </View>
        </TouchableOpacity>
    );
}
  }

can I do it this way without using it?

class Botao extends Component{

render(){
    return(
       <TouchableOpacity>
            <View>
                <Text style={this.styles.texto}>Clique</Text>
            </View>
       </TouchableOpacity>
    );
}

styles = StyleSheet.create({
    texto:{
        fontSize: 60
    }
}); 

}

Yes, the second way is how to do it. Declaring styles like that makes it a class property which is accessed from elsewhere in the class with this — Will Jenkins
– Will Jenkins, Commented Jun 6, 2019 at 15:24

Will Jenkins · Accepted Answer · 2019-06-06 15:48:25Z

6

You actually have two options here...

1) Use the class constructor:

class Botao extends Component{

  constructor(){
   this.styles = StyleSheet.create({}); // requiring a constructor
  }

  render(){
    return(
        <TouchableOpacity>
            <View>
                <Text>Clique</Text>
            </View>
        </TouchableOpacity>
    );
  }
}

2) Declare it directly as a class property (without this):

class Botao extends Component{

  styles = StyleSheet.create({});

  render(){
    return(
        <TouchableOpacity>
            <View>
                <Text>Clique</Text>
            </View>
        </TouchableOpacity>
    );
  }
}

In both cases, you would access styles from elsewhere in your class using this.styles

If you're writing a React component, you usually don't need to use the constructor method. As it says in the docs:

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

edited Jun 6, 2019 at 15:48

answered Jun 6, 2019 at 15:27

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wesif Over a year ago

what is the role of the constructor in the first case?

Nicholas Tower Over a year ago

Note that the second option uses syntax which is not yet a part of standard javascript, and thus requires babel's plugin-proposal-class-properties to use. React applications commonly use this plugin. Writing the code the second way gets transpiled into the first way.

wesif Over a year ago

without the constructor, 'this' does not assume the global scope?

Will Jenkins Over a year ago

@wesif I've updated my answer with some more info - in short, it serves no useful purpose. this has global scope in both cases, but if you choose to attach your styles property in the constructor, you have to use this in order to attach it to the containing class.

Will Jenkins Over a year ago

Before construction, there is no instance, and so this has no meaning. Does that help?

|

Collectives™ on Stack Overflow

Constructor in JavaScript/React is required?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related