Are there any devaluations of creating a component in React per function instead of Class?

Asked

Viewed 217 times

-1

There is a downside to creating the components in React by function instead of class?

In the case of Class, the component does not need to have an ID to be accessed internally and change its properties because it changes state. Already in the function has not been, so I only found the solution of sending out for the HTML provoke the browser render.

There is an internal way to change a component property by function?

Type:

function Counter (props){
    const style = {
         color: props.color
    }       
    const id = props.id;
    var numero = props.numero;
    return (
         <div>
            <button onClick={
                    function(){
                        numero = numero + 1;
                        document.getElementById(id).innerHTML = "A conta está em: " + numero;
             }
            }>+</button>
            <span id={props.id} style={style}>A conta está em: {numero}</span>
        </div>
       );
    }
function react classes

  • There is no disadvantage is only the new way (API) that was created. Now your code above has conceptual problems for those who want to do this in REACT! It’s not like that document.getElementById(id).innerHTML what makes ...

  • According to React’s own official website, there are advantages to using functions and disadvantages in using classes. If the creators themselves say this, who am I to say otherwise? https://pt-br.reactjs.org/docs/hooks-intro.html

  • Because you did so: numero = numero + 1;&#xA; document.getElementById(id).innerHTML = "A conta está em: " + numero;?

  • Actually it was just a test because I’m seeing a course and the guy teaches by class and I tried to do the same thing by function. But I couldn’t find another way to change the value of the counter internally, because props.numero is "read only". What would be the right way?

  • Got it, so around this Counter component has a Father component ???

  • Actually only one div because React doesn’t allow it to have more than one parent component. So if you need to have multiple components, like buttons etc, you all need to be a parent’s child.

  • In the case of Class, the component does not need to have an ID to be accessed internally and change its properties because it changes state. Already in the function has not been, so I only found the solution of sending out for the HTML provoke the browser render

  • Friend put everything in question only this piece gets complicated

  • Já na função não tem estado has yes! has the hook to do this ...

  • Thank you, do you have an article address that explains well about the Hooks? I will study more deeply.

  • Take a look at your statement which is an error (https://pt-br.reactjs.org/docs/hooks-faq.html#how-does-React-Associate-hook-calls-with-Components) read here

Show 6 more comments

1 answer

0

Prior to the introduction of Hooks, the biggest difference between a component extending React.Component (class) and a stateless Component (function) was the possibility of maintaining an internal state only in the first. After the addition of the Hooks, we have the possibility to use status in both.

If you want to turn your stateless into a Voce class you must:

  1. Create an ES6 class with the same name by extending React.Component.
  2. Add a single empty method called render().
  3. Move the body of the function to render method().
  4. Replace props with this.props in the render body().
  5. Exclude the remaining empty function declaration.

To use a local status in a Class

  1. Replace this.props.numero with this.state.numero in the render method()
  2. Add a constructor to the class that assigns the starting number in this.state
  3. Modify the onClick of your button to update the state with this.setState({ numero: newValue })

It’s worth it you take a look in that part of the documentation of the Act mainly on the topic State and Life Cycle that’s where that answer came from.

About the use of Hooks, Voce can find more details on that documentation page.

Browser other questions tagged function react classes

You are not signed in. Login or sign up in order to post.