1

Com o código logo abaixo quero simular o mesmo efeito com React Hook no componentWillMount método contido em classes para ?

Exemplo abaixo com o código:

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    }
    this.handleIncrement
      = this.handleIncrement.bind(this);
  }
  componentWillMount(){
    console.log('Component InitMount');
  }  
  handleIncrement() {
    let { count }  = this.state;
    count = count + 1;
    this.setState({count});
  }
  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <div><button onClick={this.handleIncrement}>Incremento</button></div>
      </div>
    );
  }
}
ReactDOM.render(<Example/>, document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">Aguarde ...</div>

1 Resposta 1

1

Para ter o mesmo efeito utilize o useEffect com um array sem nenhum item, como exemplo abaixo:

function Example() {
  const [count, setCount] = React.useState(0);
  const handleIncrement = () => setCount(count + 1);
  React.useEffect(() => {
    console.log('Component InitMount');
  }, []);
  return (
  <div>
    <div>{count}</div>
    <div>
      <button onClick={handleIncrement}>Incremento</button>
    </div>
  </div>);
}

ReactDOM.render(<Example/>, document.getElementById('root'));
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Aguarde ...</div>

Referencia: https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .