dlaczego trzeba powiązać funkcję w konstruktorze

Question

Mam pytanie relavent na ten kod: https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

szczególności:

constructor(props) { 
    super(props) 
    this.handleChange = this.handleChange.bind(this) 
    this.handleRefreshClick = this.handleRefreshClick.bind(this) 
    } 

Chyba jej się 2 część pytania.

1. Dlaczego muszę ustawić zmianę uchwytu jako instancja klasy this.handleChange =, nie mogę po prostu użyć funkcji statycznych dla handleChange i nazywają to bezpośrednio ze w klasie onClick={handleRefreshClick}>?
2. Nie mam pojęcia, co się dzieje tutaj: this.handleRefreshClick.bind(this)

Thanks

Answer 1

odpowiedzieć w odwrotnej kolejności ...

1. this.handleRefreshClick.bind(something) zwraca nową funkcję, w której odniesienia do this będą odnosić się do something. Jest to sposób na zapisanie bieżącej wartości this, która znajduje się w zasięgu podczas wywoływania do konstruktora, dzięki czemu może być używana później, gdy funkcja zostanie wywołana.

1. Jeżeli funkcje nie wymagają dostępu do stanu swojego urządzenia, a następnie upewnić, że nie trzeba ich wiązać.

---

Argumentem na rzecz dodając te linie do konstruktora jest tak, że nowe funkcje bound tworzone są tylko raz w instancji klasy. Można również użyć

onClick={this.handleRefreshClick.bind(this)} 

lub (ES6):

onClick={() => this.handleRefreshClick()} 

ale żadnej z tych metod będzie tworzyć nową funkcję każdym razem, gdy składnik jest ponownie renderowane.

Answer 2

te 2 funkcje handleChange i handleRefreshClick są przekazywane w dół jako rekwizyty do innych komponentów,

są one wiążą się z tym, ponieważ kiedy składnik potomny wywoła te funkcje, które będą zawsze wykonywane w kontekście APP.

Można usunąć te funkcje z klasy, ale nadal trzeba powiązać to, ponieważ można byłoby aktualizacji niektórych części aplikacji

Answer 3

Powodem, dla którego jest to robione, jest powiązanie słowa kluczowego this z tym obiektem. Tak jak powiedział Tom, wywoływanie funkcji z klasy nie oznacza, że ​​jest ona wywoływana z kontekstem obiektu, który utworzył tę funkcję.

myślę, że może być coraz mylić bo w reagują przykładach/tutoriale, używając React.createClass() CZY wiążą this automatycznie. Więc możesz się zastanawiać, dlaczego React.createClass() to robi, ale nie ze składnią klasy ES6.

React to dlatego nie chcą zadzierać z specyfikacje ES6 (wiążący this do funkcji z tej klasy nie jest w klasie specyfikacji ES6), ale w tym samym czasie, chciał dać swoim użytkownikom wygodę Składnia klasy ES6. Możesz przeczytać więcej na ten temat poniżej.

Github issue

Mam nadzieję, że rzuca pewne światło na dlaczego tak się dzieje.

Answer 4

Osobiście wiążę funkcje w konstruktorze, aby ich referencje nie zmieniały się przy każdym ponownym renderowaniu.

Jest to szczególnie ważne, jeśli przekazujesz funkcje tylko dzieciom czytającym, których nie trzeba aktualizować, gdy rekwizyty się nie zmieniają. Używam do tego reaktywnych dodatków-czystego-renderowania-mixin.

W przeciwnym razie, w przypadku ponownego renderowania każdego rodzica, będzie się wiązało, nowe odniesienie do funkcji zostanie utworzone i przekazane dzieciom, co może oznaczać, że zmieniono rekwizyty.