typescript - O construtor é necessário para uma classe de componente ReactJS

Estou usando ReactJS com TypeScript. Eu preciso do código "Constructor" abaixo? Ele funciona bem sem ele e eu olhei o JavaScript transpilado e parece que ele é adicionado automaticamente de qualquer forma.

interface myProps {
   children?: any;
}
class MyButton extends React.Component<myProps, {}> {
    constructor(props: myProps) { //Needed ???
        super(props);
    }

    render() {
        return (<div>
            <button>
                {this.props.children}
            </button>
        </div>);
    } //end render.
} //end class.

Resposta #1

Não, você não precisa.

Na verdade, você poderia escrever um componente simples como este como uma função.

const MyButton = (props) => {
  return (
    <div><button>{props.children}</button></div>
  );
};

Resposta #2

Como mencionado na resposta aceita:

const MyButton = (props) => {
  return (
    <div><button>{props.children}</button></div>
  );
};

Isso funciona, mas não é a mesma coisa - de jeito nenhum. Isso está construindo um StatelessComponent (sem estado, sem hooks de ciclo de vida, é apenas uma função simples, retornando apenas o JSX ou a parte da função de "render").

Se você precisa de estado ou hooks de ciclo de vida, você deve estender de React.Component - como já está feito na pergunta.

Para realmente responder à sua pergunta - sim, o construtor é necessário. Isso porque você está estendendo uma classe existente que já está pedindo uma propriedade inicial ("props") que deve ser passada no construtor -> porque é uma classe React, o React chamará internamente algo como

new MyButton(props);

Ele sempre vai lhe fornecer o objeto props para o Componente instanciado. Agora, ao estender esta classe de componente React existente, você deve alcançar o mesmo - ou acabará perdendo seu objeto "props". Para tornar isso possível, alguém ainda pode passar "props" para seu componente recém-definido, você precisa definir os props também em seu construtor, então você deve escrever isto:

constructor(props: myProps) { .. }

Caso contrário, você não pode passar nada quando chamar "new MyButton(props)" -> bem, isso não vai lançar uma exceção ou gerar um erro, mas "props" será apenas "null" no seu código subsequente de "MyButton".

Por último, mas não menos importante - você precisa chamar o "super" em uma versão estendida.

super(props);

Caso contrário, você não passará o objeto "prop" fornecido para a classe básica da qual você está estendendo. Aqui, também poderia funcionar sem ele, mas - então "props" será "null" em qualquer código do próprio "React.Component".

Então, sim, é necessário!

Basicamente, você pode responder a essa pergunta sozinho apenas usando um depurador - basta abrir suas ferramentas de desenvolvimento web, ir para o código do seu componente, colocar um ponto de interrupção no seu construtor e observar de perto o que está acontecendo e o que está sendo passado ;) Então, exclua a propriedade no construtor uma vez... e remova a chamada super uma vez... como ele vai aceitar/quebrar? ;)

Atualização:

A outra pergunta que você sempre pode se fazer ao criar novos componentes React: eu preciso de estado? eu preciso de hooks de ciclo de vida?

Se um desses for sim, você terá que estender de React.Component - porque somente a classe básica está te dando esse açúcar. Mas se puder dizer, não, eu não preciso de nenhum desses - sempre opte por um StatelessComponent:

const MyComp = (props) => (
  <div></div>
)

E tente evitar também estados de componentes locais - você pode se sair muito melhor com um estado global usando react-redux e selectors ;)