React.js: a maneira mais eficiente de passar um parâmetro para um manipulador de eventos sem bind () em um componente
Quando você tiver que usarthis
dentro de um manipulador de eventos, você deve vincular a função (manipulador de eventos) athis
kerword. Caso contrário, você precisa usar a função seta.
por exemplo
//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
this.setState({
isClicked:true
});
}
render() {
return (
<div className="App">
<button onClick={this.handleClick}>Click</button>
</div>
);
}
No entanto, com a abordagem acima, você não pode passar um parâmetro. Você precisa usar ...
bind(this, param)
após a função a função de seta anônimai.e.
<button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>
Aqui está a pergunta.
Qual é a maneira mais eficiente de passar um parâmetro para um manipulador de eventos?
De acordo como doc oficial, usandobind()
pode prejudicar o desempenho, porque ...
Usar Function.prototype.bind no render cria uma nova função cada vez que o componente renderiza
O mesmo vale para o uso da função de seta anônima. O documento diz que ...
Utilizar uma função de seta na renderização cria uma nova função sempre que o componente renderiza
ntão, qual será a maneira mais eficiente de passar um parâmetr
ualquer entrada será apreciad
PS
Algumas pessoas perguntaram comoparam
está determinado. Isso será determinado dinamicamente (ou seja, nem sempre111
). Portanto, pode ser de estados, adereços ou outras funções definidas nesta class