Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

Question 1

Я запускаю lint с моим приложением React и получаю эту ошибку:

error    JSX props should not use arrow functions        react/jsx-no-bind

И здесь я запускаю стрелочную функцию (внутри onClick):

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

Это плохая практика, которой следует избегать? И как лучше всего это сделать?

Question 2

Почему вы не должны использовать встроенные стрелочные функции в JSX-свойствах

Использование стрелочных функций или привязки в JSX - плохая практика, которая снижает производительность, потому что функция воссоздается при каждой визуализации.

Всякий раз, когда функция создается, предыдущая функция собирает мусор. Повторный рендеринг многих элементов может привести к искажению анимации.
Использование встроенной стрелочной функции в любом случае приведет к повторной отрисовке PureComponents и компонентов, которые используются shallowCompareв shouldComponentUpdateметоде. Поскольку свойство стрелочной функции воссоздается каждый раз, поверхностное сравнение идентифицирует его как изменение свойства, и компонент будет повторно отображен.

Как вы можете видеть в следующих двух примерах - когда мы используем встроенную стрелочную функцию, <Button>компонент каждый раз повторно визуализируется (на консоли отображается текст кнопки рендеринга).

Пример 1 - PureComponent без встроенного обработчика

Показать фрагмент кода

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  onClick = () => this.setState((prevState) => ({
    counter: prevState.counter + 1
  }));
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ this.onClick } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Развернуть фрагмент

Пример 2 - PureComponent со встроенным обработчиком

Показать фрагмент кода

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ () => this.setState((prevState) => ({
          counter: prevState.counter + 1
        })) } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Развернуть фрагмент

Привязка методов к thisфункциям стрелок без встраивания

Связывание метода вручную в конструкторе:

class Button extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.cb = this.cb.bind(this);
  }

  cb() {

  }

  render() {
    return (
      <button onClick={ this.cb }>Click</button>
    );
  }
}

Связывание метода с использованием полей класса предложения с функцией стрелки. Поскольку это предложение этапа 3, вам необходимо добавить предустановку этапа 3 или преобразование свойств класса в конфигурацию babel.
```
class Button extends React.Component {
  cb = () => { // the class property is initialized with an arrow function that binds this to the class

  }

  render() {
    return (
      <button onClick={ this.cb }>Click</button>
    );
  }
}
```

Компоненты функций с внутренними обратными вызовами

Когда мы создаем внутреннюю функцию (например, обработчик событий) внутри функционального компонента, функция будет воссоздаваться каждый раз, когда компонент визуализируется. Если функция передается как реквизиты (или через контекст) дочернему компоненту ( Buttonв данном случае), этот дочерний элемент также будет повторно отрисован.

Пример 1 - Функциональный компонент с внутренним обратным вызовом:

Показать фрагмент кода

const { memo, useState } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Развернуть фрагмент

Чтобы решить эту проблему, мы можем обернуть обратный вызов useCallback()хуком и установить зависимости в пустой массив.

Примечание:useState генерируются функция принимает функцию получения обновлений, что обеспечивает текущее состояние. Таким образом, нам не нужно устанавливать зависимость от текущего состояния useCallback.

Пример 2 - Функциональный компонент с внутренним обратным вызовом, заключенный в useCallback:

Показать фрагмент кода

const { memo, useState, useCallback } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + 1), []);
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Развернуть фрагмент

Question 3

Это связано с тем, что стрелочная функция, очевидно, будет создавать новый экземпляр функции при каждом рендеринге, если она используется в свойстве JSX. Это может создать огромную нагрузку на сборщик мусора, а также помешать браузеру оптимизировать любые «горячие пути», поскольку функции будут выброшены, а не использованы повторно.

Вы можете увидеть все объяснение и дополнительную информацию на https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Question 4

Чтобы избежать создания новых функций с теми же аргументами, вы можете запомнить результат привязки функции, вот простая утилита, названная memobindдля этого: https://github.com/supnate/memobind

Question 5

Использование таких встроенных функций совершенно нормально. Правило линтинга устарело.

Это правило пришло из тех времен, когда стрелочные функции были не так распространены, и люди использовали .bind (this), который раньше был медленным. Проблема с производительностью исправлена в Chrome 49.

Обратите внимание, что вы не передаете встроенные функции в качестве свойств дочернему компоненту.

Райан Флоренс, автор React Router, написал об этом отличную статью:

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Question 6

Вы можете использовать стрелочные функции с помощью библиотеки react-cached-handler , не нужно беспокоиться о производительности повторного рендеринга:

Примечание: внутренне он кэширует ваши стрелочные функции по указанному ключу, не нужно беспокоиться о повторном рендеринге!

render() {

  return <div>
  {
        this.props.photos.map(photo=>
          <Photo key={photo.url}
            onClick={this.handler(photo.url, (url) => { 
                 console.log(url) })}
          />)
   }
 </div>

}

Другие свойства:

Именованные обработчики
Обработка событий с помощью стрелочных функций
Доступ к ключу, настраиваемым аргументам и исходному событию
Производительность рендеринга компонентов
Пользовательский контекст для обработчиков

Question 7

Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

В основном потому, что встроенные функции могут нарушить мемоизацию оптимизированных компонентов:

Традиционно проблемы с производительностью встроенных функций в React были связаны с тем, как передача новых обратных вызовов при каждом рендеринге нарушает shouldComponentUpdateоптимизацию дочерних компонентов. ( документы )

Речь идет о меньших затратах на создание дополнительных функций:

Function.prototype.bind Здесь исправлены проблемы с производительностью, а стрелочные функции либо встроены, либо передаются с помощью babel в простые функции; в обоих случаях можно предположить, что он не медленный. ( Обучение React )

Я считаю, что люди, утверждающие, что создание функций стоит дорого, всегда были дезинформированы (команда React никогда этого не говорила). ( Твитнуть )

Когда это `react/jsx-no-bind`правило полезно?

Вы хотите убедиться, что мемоизированные компоненты работают должным образом:

React.memo (для функциональных компонентов)
PureComponentили пользовательский shouldComponentUpdate(для компонентов класса)

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

Как решить ошибку ESLint?

Классы: определите обработчик как метод или свойство класса для thisпривязки.
Крючки: Использование useCallback.

Середина

Во многих случаях встроенные функции очень удобны в использовании и абсолютно подходят с точки зрения требований к производительности. К сожалению, это правило не может быть ограничено только мемоизированными типами компонентов. Если вы все еще хотите использовать его повсеместно, вы можете, например, отключить его для простых узлов DOM:

rules: {
  "react/jsx-no-bind": [ "error", { ignoreDOMComponents: true } ],
}

const Comp = () => <span onClick={() => console.log("Hello!")} />; // no warning

Answer 1

Я запускаю lint с моим приложением React и получаю эту ошибку:

error    JSX props should not use arrow functions        react/jsx-no-bind

И здесь я запускаю стрелочную функцию (внутри onClick):

{this.state.photos.map(tile => (
  <span key={tile.img}>
    <Checkbox
      defaultChecked={tile.checked}
      onCheck={() => this.selectPicture(tile)}
      style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}}
    />
    <GridTile
      title={tile.title}
      subtitle={<span>by <b>{tile.author}</b></span>}
      actionIcon={<IconButton onClick={() => this.handleDelete(tile)}><Delete color="white"/></IconButton>}
    >
      <img onClick={() => this.handleOpen(tile.img)} src={tile.img} style={{cursor: 'pointer'}}/>
    </GridTile>
  </span>
))}

Это плохая практика, которой следует избегать? И как лучше всего это сделать?

Answer 2

Почему вы не должны использовать встроенные стрелочные функции в JSX-свойствах

Использование стрелочных функций или привязки в JSX - плохая практика, которая снижает производительность, потому что функция воссоздается при каждой визуализации.

Всякий раз, когда функция создается, предыдущая функция собирает мусор. Повторный рендеринг многих элементов может привести к искажению анимации.
Использование встроенной стрелочной функции в любом случае приведет к повторной отрисовке PureComponents и компонентов, которые используются shallowCompareв shouldComponentUpdateметоде. Поскольку свойство стрелочной функции воссоздается каждый раз, поверхностное сравнение идентифицирует его как изменение свойства, и компонент будет повторно отображен.

Как вы можете видеть в следующих двух примерах - когда мы используем встроенную стрелочную функцию, <Button>компонент каждый раз повторно визуализируется (на консоли отображается текст кнопки рендеринга).

Пример 1 - PureComponent без встроенного обработчика

Показать фрагмент кода

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  onClick = () => this.setState((prevState) => ({
    counter: prevState.counter + 1
  }));
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ this.onClick } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Развернуть фрагмент

Пример 2 - PureComponent со встроенным обработчиком

Показать фрагмент кода

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    
    console.log('render button');
    
    return (
      <button onClick={ onClick }>Click</button>
    );
  }
}

class Parent extends React.Component {
  state = {
    counter: 0
  }
  
  render() {
    const { counter } = this.state;
    
    return (
      <div>
        <Button onClick={ () => this.setState((prevState) => ({
          counter: prevState.counter + 1
        })) } />
        <div>{ counter }</div>
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Развернуть фрагмент

Привязка методов к thisфункциям стрелок без встраивания

Связывание метода вручную в конструкторе:

class Button extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.cb = this.cb.bind(this);
  }

  cb() {

  }

  render() {
    return (
      <button onClick={ this.cb }>Click</button>
    );
  }
}

Связывание метода с использованием полей класса предложения с функцией стрелки. Поскольку это предложение этапа 3, вам необходимо добавить предустановку этапа 3 или преобразование свойств класса в конфигурацию babel.
```
class Button extends React.Component {
  cb = () => { // the class property is initialized with an arrow function that binds this to the class

  }

  render() {
    return (
      <button onClick={ this.cb }>Click</button>
    );
  }
}
```

Компоненты функций с внутренними обратными вызовами

Когда мы создаем внутреннюю функцию (например, обработчик событий) внутри функционального компонента, функция будет воссоздаваться каждый раз, когда компонент визуализируется. Если функция передается как реквизиты (или через контекст) дочернему компоненту ( Buttonв данном случае), этот дочерний элемент также будет повторно отрисован.

Пример 1 - Функциональный компонент с внутренним обратным вызовом:

Показать фрагмент кода

const { memo, useState } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); // the function is recreated all the time
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Развернуть фрагмент

Чтобы решить эту проблему, мы можем обернуть обратный вызов useCallback()хуком и установить зависимости в пустой массив.

Примечание:useState генерируются функция принимает функцию получения обновлений, что обеспечивает текущее состояние. Таким образом, нам не нужно устанавливать зависимость от текущего состояния useCallback.

Пример 2 - Функциональный компонент с внутренним обратным вызовом, заключенный в useCallback:

Показать фрагмент кода

const { memo, useState, useCallback } = React;

const Button = memo(({ onClick }) => console.log('render button') || (
  <button onClick={onClick}>Click</button>
));

const Parent = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + 1), []);
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Развернуть фрагмент

Answer 3

3

Как этого добиться в компонентах без состояния?

люкс,

Answer 4

4

Компоненты без состояния (функции) не имеют this, поэтому связывать нечего. Обычно методы предоставляются интеллектуальным компонентом оболочки.

Ори Дрори

Answer 5

39

@OriDrori: Как это работает, когда вам нужно передать данные в обратном вызове? onClick={() => { onTodoClick(todo.id) }

адам-бек

Answer 6

4

@ adam-beck - добавьте его в определение метода обратного вызова в классе cb() { onTodoClick(this.props.todo.id); }.

Ори Дрори

Answer 7

2

@ adam-beck Я думаю, это как использовать useCallbackс динамическим значением. stackoverflow.com/questions/55006061/…

Шота Тамура

Answer 8

9

Это связано с тем, что стрелочная функция, очевидно, будет создавать новый экземпляр функции при каждом рендеринге, если она используется в свойстве JSX. Это может создать огромную нагрузку на сборщик мусора, а также помешать браузеру оптимизировать любые «горячие пути», поскольку функции будут выброшены, а не использованы повторно.

Вы можете увидеть все объяснение и дополнительную информацию на https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md

Карл-Йохан Сьегрен
источник

Не только это. Создание новых экземпляров функции каждый раз означает, что состояние изменяется, и когда состояние компонента изменяется, оно будет повторно отображаться. Поскольку одна из основных причин использовать React - визуализировать только те элементы, которые меняются, использование bindфункций или стрелок здесь означает выстрел себе в ногу. Однако это плохо документировано, особенно в случае работы с mapмассивами ping в списках и т. Д.

hippietrail

«Создание новых экземпляров функции каждый раз означает изменение состояния», что вы имеете в виду? Там нет никакого государства в вообще в вопросе

apieceofbart

Answer 9

Не только это. Создание новых экземпляров функции каждый раз означает, что состояние изменяется, и когда состояние компонента изменяется, оно будет повторно отображаться. Поскольку одна из основных причин использовать React - визуализировать только те элементы, которые меняются, использование bindфункций или стрелок здесь означает выстрел себе в ногу. Однако это плохо документировано, особенно в случае работы с mapмассивами ping в списках и т. Д.

hippietrail

Answer 10

«Создание новых экземпляров функции каждый раз означает изменение состояния», что вы имеете в виду? Там нет никакого государства в вообще в вопросе

apieceofbart

Answer 11

Чтобы избежать создания новых функций с теми же аргументами, вы можете запомнить результат привязки функции, вот простая утилита, названная memobindдля этого: https://github.com/supnate/memobind

Answer 12

Использование таких встроенных функций совершенно нормально. Правило линтинга устарело.

Это правило пришло из тех времен, когда стрелочные функции были не так распространены, и люди использовали .bind (this), который раньше был медленным. Проблема с производительностью исправлена в Chrome 49.

Обратите внимание, что вы не передаете встроенные функции в качестве свойств дочернему компоненту.

Райан Флоренс, автор React Router, написал об этом отличную статью:

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

Answer 13

Не могли бы вы показать, как написать модульный тест для компонентов со встроенными стрелочными функциями?

krankuba

Answer 14

1

@krankuba Вопрос не об этом. Вы по-прежнему можете передавать анонимные функции, которые не определены встроенными, но по-прежнему не тестируются.

sbaechler

Answer 15

Вы можете использовать стрелочные функции с помощью библиотеки react-cached-handler , не нужно беспокоиться о производительности повторного рендеринга:

Примечание: внутренне он кэширует ваши стрелочные функции по указанному ключу, не нужно беспокоиться о повторном рендеринге!

render() {

  return <div>
  {
        this.props.photos.map(photo=>
          <Photo key={photo.url}
            onClick={this.handler(photo.url, (url) => { 
                 console.log(url) })}
          />)
   }
 </div>

}

Другие свойства:

Именованные обработчики
Обработка событий с помощью стрелочных функций
Доступ к ключу, настраиваемым аргументам и исходному событию
Производительность рендеринга компонентов
Пользовательский контекст для обработчиков

Answer 16

Вопрос был в том, почему мы не можем его использовать. Не как использовать это с каким-нибудь другим хаком.

капил

Answer 17

Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

В основном потому, что встроенные функции могут нарушить мемоизацию оптимизированных компонентов:

Традиционно проблемы с производительностью встроенных функций в React были связаны с тем, как передача новых обратных вызовов при каждом рендеринге нарушает shouldComponentUpdateоптимизацию дочерних компонентов. ( документы )

Речь идет о меньших затратах на создание дополнительных функций:

Function.prototype.bind Здесь исправлены проблемы с производительностью, а стрелочные функции либо встроены, либо передаются с помощью babel в простые функции; в обоих случаях можно предположить, что он не медленный. ( Обучение React )

Я считаю, что люди, утверждающие, что создание функций стоит дорого, всегда были дезинформированы (команда React никогда этого не говорила). ( Твитнуть )

Когда это `react/jsx-no-bind`правило полезно?

Вы хотите убедиться, что мемоизированные компоненты работают должным образом:

React.memo (для функциональных компонентов)
PureComponentили пользовательский shouldComponentUpdate(для компонентов класса)

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

Как решить ошибку ESLint?

Классы: определите обработчик как метод или свойство класса для thisпривязки.
Крючки: Использование useCallback.

Середина

Во многих случаях встроенные функции очень удобны в использовании и абсолютно подходят с точки зрения требований к производительности. К сожалению, это правило не может быть ограничено только мемоизированными типами компонентов. Если вы все еще хотите использовать его повсеместно, вы можете, например, отключить его для простых узлов DOM:

rules: {
  "react/jsx-no-bind": [ "error", { ignoreDOMComponents: true } ],
}

const Comp = () => <span onClick={() => console.log("Hello!")} />; // no warning

Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

Ответы:

Компоненты функций с внутренними обратными вызовами

Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

Когда это react/jsx-no-bindправило полезно?

Как решить ошибку ESLint?

Середина

Когда это `react/jsx-no-bind`правило полезно?