Автор оригинала: FreeCodeCamp Community Member.

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

Вот пример. Я итарюсь через список пользователей и передаю идентификатор пользователя для удаления к функции DELETEUSER в строке 31.

import React from 'react';

class App extends React.Component {
  constructor() {
    this.state = {
      users: [
        { id: 1, name: 'Cory' }, 
        { id: 2, name: 'Meg' }
      ]
    };
  }
  
  deleteUser = id => {
    this.setState(prevState => {
      return { users: prevState.users.filter( user => user.id !== id)}
    })
  }

  render() {
    return (
      

        
Users
        

        { 
          this.state.users.map( user => {
            return (
              

                 this.deleteUser(user.id)} 
                /> 
                {user.name}
              
            )
          })
        }
        
      
    );
  }
}

export default App;

Вот a Рабочий пример на CodeSandbox Отказ (что потрясающе?)

Так в чем проблема?

Я использую функцию стрелки в обработчике кликов. Это значит Каждый раз Render Run, новая функция выделена Отказ Во многих случаях это не имеет большое дело. Но если у вас есть детские компоненты, они повторно отображают, даже когда данные не изменились, потому что каждый рендер выделяет новую функцию.

Итог : Избегайте объявления функций стрелки или привязки в рендере для оптимальной производительности. Моя команда использует Это правило ESLINT чтобы помочь предупредить нас к этому вопросу.

Какое решение?

Итак, как вы избегаете связывания и функций стрелки в визуализации? Одним из вариантов является извлечение дочернего компонента. Здесь я извлек список списка на userlistiteM.js:

import React from 'react';
import PropTypes from 'prop-types';

class UserListItem extends React.Component {
  onDeleteClick = () => {
    // No bind needed since we can compose 
    // the relevant data for this item here
    this.props.onClick(this.props.user.id);
  }

  // No arrow func in render! ?
  render() {
    return (
      

         
        {this.props.user.name}
      
    );
  }
}

UserListItem.propTypes = {
  user: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired
};

export default UserListItem;

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

import React from 'react';
import { render } from 'react-dom';
import UserListItem from './UserListItem';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [{ id: 1, name: 'Cory' }, { id: 2, name: 'Sherry' }],
    };
  }

  deleteUser = id => {
    this.setState(prevState => {
      return { users: prevState.users.filter(user => user.id !== id) };
    });
  };

  renderUserListItem = user =>
    ;

  render() {
    return (
      

        
Users
        

          {this.state.users.map(this.renderUserListItem)}
        
      
    );
  }
}

render(, document.getElementById('root'));

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

Вот a Рабочий пример этого окончательного рефактора Отказ

Yay или auck?

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

1. Визуализация часто называется.
2. Рендеринг детей дороги.

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

Таким образом, у вас есть два варианта: либо разрешите стрелки и привязывать везде (и иметь дело с Perfucts, если они всплывают) или запрещают их для оптимальной производительности и последовательности.

Шефт: Я рекомендую запретить стрелки и связываться в визуализации. Вот почему:

1. Вы должны отключить Полезное правило ESLINT Я предложил выше, чтобы позволить этому.
2. Как только вы отключите правило отвлечения, люди могут скопировать этот шаблон и начать отключить другие правила льмина. Исключение в одном месте может быстро стать нормой …

Общее правило для кода Отзывы: Каждая строка кода должна быть достойна копирования. Потому что люди будут. #Cleancode

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

Есть еще один способ, которым вы хотели бы справиться с этим? Перезвонить через комментарии!

Ищете больше на реагировании? ⚛.

Я был авторизован несколько курсов React и JavaScript На плютаре ( бесплатная пробная версия ). Мой последний, ” Создание многоразовых реагированных компонентов ” Просто опубликовано! ?

Дом Кори автор Несколько курсов по JavaScript, React, Clear Code, .NET и многое другое на PluralSight Отказ Он главный консультант по адресу Reactjsconsulting.com , архитектор программного обеспечения в Vinsolutions, Microsoft MVP и поезда разработчиков программного обеспечения на международном уровне по методике программного обеспечения, такими как интерфейс разработки и чистого кодирования. Твиты CORY о JavaScript и Front-End Development в Twitter, как @houseCor Отказ