Ejemplo Vida de componentes

import React, { Component } from 'react'

class Asterisco extends React.Component {
  constructor(props){
    console.log("Entro en el constructor");
    super(props)
    this.state = {
      cadena: '*'
    };
  }
  
  incrementar = () => {
    this.setState({cadena:this.state.cadena+'*'})
  };
  decrementar = () => {
    let a=this.state.cadena
    if (a.length>0){
    this.setState({cadena:a.slice(0,-1)})
  }
  
  };
  reset=()=>{
    this.setState({cadena:'*'})
  }
  shouldComponentUpdate() {
    if (this.state.cadena.length%2==0){
      return false;
    } else{
    return true;
  }
  }
  render() {
    console.log("Entro en el renderizado");
    return (
      <div>
        <h2>{this.state.cadena}</h2>
        <h3>El fabuloso programa de jugar con los asteriscos</h3>
        <p>En este momento tienes {this.state.cadena.length} asteriscos</p>
        <button onClick={this.decrementar}>Decrementar</button>
        <button onClick={this.incrementar}>Incrementar</button>
        <button onClick={this.reset}>Reset</button>
      </div>
    );
  }
  componentDidMount(){
    console.log("Componente montado y listo para funcionar");
  }
  componentDidUpdate(){
    console.log("El componente se ha actualizado");
  }
}

export default function App() {
  return <Asterisco/>;
}

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos