Você tem a ideia certa. Vá com funcional se o seu componente não fizer muito mais do que pegar alguns adereços e renderizar. Você pode pensar nelas como funções puras, porque sempre renderizam e se comportam da mesma forma, considerando os mesmos adereços. Além disso, eles não se preocupam com os métodos do ciclo de vida ou têm seu próprio estado interno.
Por serem leves, escrever esses componentes simples como componentes funcionais é bastante padrão.
Se seus componentes precisarem de mais funcionalidades, como manter estado, use classes.
Mais informações: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
EDIT : Muito do acima foi verdadeiro, até a introdução do React Hooks.
componentDidUpdate
pode ser replicado com useEffect(fn)
, onde fn
é a função a ser executada após a renderização novamente.
componentDidMount
Os métodos podem ser replicados com useEffect(fn, [])
, em que fn
é a função a ser executada após a renderização e []
é uma matriz de objetos para a qual o componente será renderizado novamente, se e somente se pelo menos um tiver alterado o valor desde a renderização anterior. Como não há, useEffect()
é executado uma vez, na primeira montagem.
state
pode ser replicado com useState()
, cujo valor de retorno pode ser destruído para uma referência do estado e uma função que pode definir o estado (ou seja, const [state, setState] = useState(initState)
). Um exemplo pode explicar isso mais claramente:
const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>+</button>
</div>
)
}
default export Counter
Em relação à recomendação sobre quando usar a classe sobre os componentes funcionais, o Facebook recomenda oficialmente o uso de componentes funcionais sempre que possível . Como um pequeno aparte, ouvi várias pessoas discutindo não usar componentes funcionais pelos motivos de desempenho, especificamente
"As funções de manipulação de eventos são redefinidas por renderização em componentes funcionais"
Embora verdadeiro, considere se seus componentes estão realmente renderizando a uma velocidade ou volume que valeria a pena preocupar.
Se estiverem, você pode impedir a redefinição de funções usando useCallback
e useMemo
hooks. No entanto, lembre-se de que isso pode piorar seu desempenho (microscopicamente) .
Mas, honestamente, nunca ouvi falar de redefinir funções como gargalo nos aplicativos React. Otimizações prematuras são a raiz de todo mal - preocupe-se com isso quando for um problema