5 способов связать это в React.js

внешний интерфейс JavaScript React.js

thisУже довольно гибкий в javascript, добавление его в React дает нам еще больше запутанных вариантов. Давайте посмотрим на Reactthis5 способов привязки.

1. Используйте React.createClass

Если вы используете React 15 и ниже, возможно, вы использовалиReact.createClassФункция для создания компонента. всех функций, которые вы создаете внутриthisбудет автоматически привязан к компоненту.

const App = React.createClass({
  handleClick() {
    console.log('this > ', this); // this 指向App组件本身
  },
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    );
  }
});

Но следует отметить, что с выходом React 16 официалы убрали метод из React

2. Используйте привязку в методе рендеринга

Если вы используете React.Component для создания компонента и даете компоненту/элементу свойство onClick в нем, теперь он автоматически привязывает егоthisк текущему компоненту, решение этого состоит в том, чтобы использовать после функции события.bind(this)Привяжите это к текущему компоненту.

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>test</div>
    )
  }
}

Этот метод прост и, вероятно, является тем, к которому прибегают большинство начинающих разработчиков, столкнувшись с проблемой. Затем, поскольку компонент выполняется каждый разrenderФункции будут переназначены, что повлияет на производительность. Особенно после того, как вы сделаете некоторые оптимизации производительности, это снизит производительность PureComponent. Не рекомендуется

3. Используйте функцию стрелки в методе рендеринга

Этот подход использует привязку контекста ES6, чтобы разрешитьthisУказывает на текущий компонент, но у него те же проблемы с производительностью, что и у второго, и его не рекомендуется использовать

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={e => this.handleClick(e)}>test</div>
    )
  }
}

Приведенные ниже методы могут избежать этих проблем без особых дополнительных хлопот.

4. Привязка в конструкторе

чтобы избежатьrenderсвязываниеthisЧтобы поднять возможные проблемы с производительностью, мы можемconstructorпредварительно связанный в .

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

Тогда этот метод, очевидно, не так хорош, как второй и третий с точки зрения удобочитаемости и ремонтопригодности, но второй и третий не рекомендуются из-за потенциальных проблем с производительностью, поэтому теперь рекомендуется ECMA stage-2.Предусмотренная привязка стрелочной функции.

5. Используйте привязку стрелочной функции на этапе определения

Чтобы использовать эту функцию, вам нужно включить функцию stage-2 в .babelrc Метод привязки следующий:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

Этот подход имеет множество оптимизаций:

  • Стрелочные функции автоматически привязываются к области видимости текущего компонента и не будутcallИзменять

  • Это позволяет избежать возможных потенциальных проблем с производительностью типов 2 и 3.

  • Это позволяет избежать большого количества повторяющегося кода для 4-й привязки.

Суммировать:

Если вы используете ES6 и React 16+, лучше всего использовать метод 5 для привязкиthis

Использованная литература:

Спасибо за чтение, как вы можетеСледуйте за га

Категории