Poprawne bindowanie funkcji w React.js

[type-of-web-komentarze[bot]]

Poprawne bindowanie funkcji w React.js

Jak pewnie zauważyłaś/eś — wywołanie metody klasy w React.js z poziomu funkcji render kończy się źle, o ile nie użyjesz bind. Wspominałem też o tym w kursie i sam używałem po prostu bind w czasie renderowania. Ale czy to dobre rozwiązanie? Co z wydajnością i czytelnością takiego kodu?

https://typeofweb.com/poprawne-bindowanie-funkcji-react-js

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	mz		2018-03-07 08:31

Hej, świetny wpis!
Zastanawiam się jak najlepiej podejść do sytuacji, w której renderujemy jakąś kolekcję (np. listę kontaktów) poprzez metodę map i do każdego elementu chcemy podpiąć na onClick funkcję, która jako argument przyjmuje id danego kontaktu.
Do tej pory robiłem to właśnie przez arrow function:
onClick={() => someFunction(item.id)}

Alternatywą wydaje się użycie metody bind, jednak dalej przy każdym wykonaniu funkcji render będziemy tworzyć nową funkcję, w dodatku dla każdego elementu z listy.
Jest na to jakiś wydajniejszy sposób?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-07 10:30

No jest to problem ;) Jest kilka rozwiązań. Jedno to arrow function albo bind, które proponujesz.
Drugie ma sens gdy element listy jest bardziej rozbudowany — zamień każdy element listy na osobny komponent i dodaj mu odpowiednie propsy :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Michał		2018-03-23 21:30

Jest. Tak jak pisał Michał twojego handlera tworzysz za pomocą arrow function, i przekazujesz go do renderowanego elementu, a elementowi z kolei nadajesz atrybut data-id równy Id twojego elementu, np
....
contacts.map(contact =>

{contact.name}

); i to odczytujesz w handlerze poprzez event.target.dataset.id. Sam handler może wyglądać tak:

handleShowId = (event) => {
const id = event.target.dataset.id;
this.setState(() => ({
selectedContactId: id
})
}

Ewentualnie, ale tu nie piszę z pełnym przekonaniem, mógłbyś spróbować handlera podczepić jedynie wyżej na rodzicu tej całej kolekcji i wówczas odczytujesz Id klikniętego

z parametru event.currentTarget.value.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Marcin Bogucki		2018-03-11 11:34

Witaj Michale

napisałeś że najlepsze jest użycie arrow function dla zdarzeń onClick, czy onChange

a jeżeli musimy przekazać parametr
to robimy w ten sposób ?

<button onClick={ this.deleteMessage(message.id)}>Delete

dla ES6
deleteMessage = id => event => {
console.log(id, event);
}

albo dla ES5

deleteMessage = function(id) {
return function(event) {
consolee.log(id, event)
}
}

Pozdrawiam, czy to dobra praktyka ?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2018-03-11 22:02

To podpada pod moją odpowiedź niżej „Drugie ma sens gdy element listy jest bardziej rozbudowany — zamień każdy element listy na osobny komponent i dodaj mu odpowiednie propsy :)”
;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr Aueternum	http://piotr-aueternum.ct8.pl/	2018-03-12 22:02

Tak widziałem, jednak nie miałem na myśli niczego rozbudowanego, a raczej drobną 'nakładkę' na bazowe elementy. :D

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Grzegorz		2019-01-04 11:27

Co się dzieje pod fragmentem {...this.props}="" rozumiem , że ... to spread, a przypisanie wygląda na destrukturyzację, ale nie umiem tego ułożyć

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-19 17:54

To literówka, pewnie wina Disqusa. Miało być tylko {...this.props}

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Grzegorz		2019-09-19 17:54

Uff dzieki

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Joanna Trapp		2019-02-08 21:59

Podoba się! Proste i logiczne :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Przemek Łuszkiewicz		2020-01-21 13:07

Cześć, czy mógłby ktoś podać instrukcję jak skonfigurować ESLinta aby podpowiadał użycie arrow functions?

 
 

Komentarz zaimportowany z WordPressa