Como a herança prototípica no JavaScript realmente funciona?
Ainda não entendo completamente a dicotomia de herança (prototípica versus clássica) em JavaScript.
Se oclass
é apenas um açúcar sintático sobre protótipos, como eu devo retirá-lo?
Você pode me mostrar as diferentes abordagens na criação de elementos React com classes e protótipos (ou seja, semclass
& React.createClass
)?
Então, existe uma maneira de obter um componente stateful usando nativoObject.create
?
Como isso:
const Hello = Object.create(React.Component.prototype, {
componentDidMount: {
value: function() {
alert('Mounted');
}
},
render: {
value: function() {
return <div>I love StackOverflow community! It is so helpful and friendly</div>;
}
}
});
ReactDOM.render(<Hello />, document.getElementById('root'));
Parece que algo assim não funcionará por causa das restrições da lib interna.Mas por que não podemos usá-lo na natureza mais natural e prototípica do JavaScript?
Há uma observação dos documentos oficiais:https://facebook.github.io/react/docs/composition-vs-inheritance.html#so-what-about-inheritance
[...] não encontramos nenhum caso de uso em que recomendamos a criação de hierarquias de herança de componentes
Mas não éclass
principalmente sobre herança?
Estou muito confuso e gostaria de ouvir suas opiniões sobre o que estou fazendo e pensando errado?
Fiz essa pergunta na Reactiflux e Brendan Hurley propôs isso:https://codepen.io/niechea/pen/xdVEvv?editors=0010
function MyComponent(props) {
this.props = props;
this.state = {
clickCount: 0,
};
}
MyComponent.prototype = Object.create(React.Component.prototype);
MyComponent.prototype.clickHandler = function() {
this.setState({
clickCount: this.state.clickCount + 1,
});
}
MyComponent.prototype.render = function() {
return (
<div>
<p>Hello, {this.props.name}.</p>
<p>You have clicked {this.state.clickCount} time(s)!</p>
<button onClick={this.clickHandler.bind(this)}>Click me</button>
</div>
);
}
ReactDOM.render(<MyComponent name="Bogdan" />, document.getElementById('app'));
A solução dele é verdadeiramente prototípica?
Aqui estão algumas referências:
http://javascript.crockford.com/prototypal.htmlhttps://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3http://henleyedition.com/making-inheritance-make-sense-with-object-create/* A questão é principalmente sobre herança, não sobre React. Reagir aqui é apenas uma referência.