Cuando escribo un componente como clase, necesita el método render . Por ejemplo:
class Greet extends React.Component { render() { return <h1>Hello, world!</h1>; } } Como resultado, render() es un método de cada instancia de Greet . Mientras tanto, si escribo el mismo componente que una función de fábrica, no se requiere el método render() :
function Greet() { return <h1>Hello, world!</h1>; }En ambos casos, para representar ese componente en la ventana del navegador, es necesario ejecutar esto:
ReactDOM.render({ <Greet />, document.getElementById("root") }); Entonces, ¿cómo es que cuando una class se pasa como un parámetro a ReactDOM.render() , necesita que se incluya render() , mientras que una función no?
¿Se debe, por casualidad, a que la class no puede devolver algo directamente sin encapsularlo en un método, por lo que se decidió que ese método tuviera el mismo nombre? En ese caso, ¿cómo funciona ReactDOM.render() en cada escenario?
En React, piense en un componente funcional como parte de representación de una clase. Muchas veces, especialmente cuando se usa la composición, eso es todo lo que un componente de React necesita hacer. Así que esto realmente reduce una gran cantidad de placa de caldera.
Pero eso deja un gran vacío, como la forma en que manejas los métodos de ciclo de vida/efectos, etc., y ahí es donde entran los Hooks.
Entonces, de vuelta a su pregunta => necesita que se incluya render()
Tiene algo de razón, si quiere decir que una clase (constructor) no puede devolver algo, bueno, puede hacerlo, pero no se recomienda hacerlo. Y dado que en React render se puede llamar varias veces, ciertamente no tiene sentido que esté en el constructor de todos modos.
Entonces, en pocas palabras, dado que un componente React funcional es la etapa de procesamiento, por supuesto, no requiere una función de procesamiento. Pero dado que un constructor de clase no debe usarse para una función de representación, por supuesto necesitará un método de representación.