React.js components podem ser definidos de diferentes formas, entre elas:
-
Como classes filhas das classes
Component
ePureComponent
.import { PureComponent } from 'react'; class Button extends PureComponent { static defaultProps = { type: 'button', }; render() { const { type, children, onClick } = this.props; return ( <button type={type} onClick={onClick}> {children} </button> ); } }
-
Como retorno das funções
forwardRef
ememo
.import { forwardRef } from 'react'; const Button = forwardRef( function Button(props, ref) { const { type, children, onClick } = props; return ( <button ref={ref} type={type} onClick={onClick}> {children} </button> ); }, );
-
Como funções que recebem um objeto com as props como argumento e retornam JSX (ou
null
).function Button(props) { const { type, children, onClick } = props; return ( <button type={type} onClick={onClick}> {children} </button> ); }