Componente baseado em classe x Componentes funcionais, qual é a diferença (Reactjs)
Eu sou novo emReagir e quero ter uma ideia clara de qual usar, quando se trata de componentes, vejo que existem dois tipos.
Componente funcional:
import React from 'react'
const userInput = (props) => {
return(
<div>
<input type='text' onChange={,props.nameChanged} value={props.username}></input>
</div>
)
};
export default userInput;
Componente baseado em classe:
import React, { Component } from 'react';
import './App.css';
import UserOutput from './UserOutput/UserOutput';
import UserInput from './UserInput/UserInput';
class App extends Component {
render() {
return (
<div className="App">
<h3>Assignment Output :</h3>
<ul>
<li>
<UserOutput
username={this.state.Usernames[0].username}>
Welcome to React!
</UserOutput>
<UserInput
nameChanged={this.nameChangedHandler}>
</UserInput>
</li>
</ul>
</div>
);
}
}
export default App;
Eu leio que devemos sempre tentar usar umComponente funcional porque ajuda em algumas coisas e também soube que devemos evitar o uso deComponente baseado em classe tanto quanto possível.
Estou confuso sobre o que é certo e o que não é.
Por que tentar usar o componente funcional, sempre que possível, quais são os benefícios?
Quando devemos ir para um componente funcional e quando não, não está claro.