Должен ли я связывать также встроенные методы React? - PullRequest
Новая
       31

Должен ли я связывать также встроенные методы React?

0 голосов
/ 04 июня 2019

Обычной практикой является bind метод, созданный пользователем внутри React.Component класса. 

class App extends React.Component { // simplified example, not actual code
   constructor(){ 
      //...
      this.logIn=this.logIn.bind(this) // Binding of a method
   }
}

Естественно, это потому, что нам нужно явно bind метод к "this class", иначе мы будем ссылаться на this объект window!

Что мне, однако, непонятно, меньше всего из документации и т. Д., Которые я просмотрел, если мы используем встроенные методы жизненного цикла , такие как render() или componentDidMount(), большинство фрагментов кода, а также официальная документация кажутся явно неbind до this

class App extends React.Component {
   constructor(){
      //....
      this.componentDidMount = this.componentDidMount.bind(this) 
      // is there reason why we don't do this ^ ??
   }
}
  • Есть ли какая-то встроенная привязка уже внутри React.Component, который мы расширяем?
  • Или почему нам не нужно явно bind методы жизненного цикла (componentDidMount()) , как и остальные наши созданные методы (logIn()) ?

Ответы [ 2 ]

1 голос
/ 04 июня 2019

Я сделал компонент со следующим: 

...
componentDidMount() {
    var that = this;
    var x = 0;
}
...
render() {
    ....
    <button onClick={this.componentDidMount}>DID MOUNT</button>
    ....
}

И результаты в том, что при первоначальном монтировании функции that правильно связывается, но при нажатии на кнопку,это не так.

Это означает, что componentDidMount еще не связан, но он вызывается из внутренних компонентов React с соответствующим контекстом , поэтому его не нужно связывать.

- edit

Возможно, также примечательно: стоит проверить, используете ли вы пакет автоматической привязки, если он связывает методы жизненного цикла.autobind-decorator на самом деле делает!

0 голосов
/ 04 июня 2019

Естественно, это потому, что нам нужно явно привязать метод к "этому классу", иначе мы будем ссылаться на этот объект окна!

Вы также можете использовать функции стрелокчтобы можно было использовать это без привязки: 

sayHello=()=>{
  return 'hello';
}

myOtherFunction=()=>{
  console.log('I can acces the other function! Say:'+ this.sayHello())
}

И вам не нужно связывать методы жизненного цикла

Редактировать: Как сказано в документации в https://reactjs.org/docs/handling-events.html

Вы должны быть осторожны со значением этого в обратных вызовах JSX.В JavaScript методы класса не связаны по умолчанию.Если вы забудете связать this.handleClick и передать его onClick, при вызове функции это значение будет неопределенным.

Поэтому предполагается, что методы жизненного цикла связаны по умолчанию.

...