Блог

Все эти функции являются методами класса, скажем, App class. и у меня есть компонент (ы) в функции рендеринга :

 {playerList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Offense', 'detailed')}
               key = {index}>{item}
</DropdownItem>
)



{targetList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Defense', 'summary')}
               key = {index}>{item}
</DropdownItem>
)

  

и setRequestParam выполняет :

 setRequestParam = (value, paramName, desc) => {
        this.setState({
          params : {
              ...this.state.params,
              [paramName] : value
            }
          }, function setStateCallback(){          
             console.log(this.state.params)

             this.getStatsData(desc)
          }
        ) 
    }

  

и getStatsData (desc) выполняет:

 getStatsData = async (desc) => {

      if (desc === 'detailed'){ .. does something }
      else if (desc === 'summary'){ .. does something }
      else if (desc === 'a different keyword'){... does something}
      ...
}


  

Итак, цель здесь состоит в том, чтобы сделать запрос POST на DropdownItem onclick, и, как я чувствую, в настоящее время требуется отправка нескольких параметров через обработчик событий. Однако я слышал, что использование функции со стрелкой внутри функции рендеринга с высокой вероятностью может вызвать проблемы с производительностью.

Я слышал, что есть несколько способов получить параметры в обработчике событий, и я видел несколько способов :

1. Тот, который я использовал (привязка функции со стрелкой при рендеринге)

2. функция возвращает функцию

 setRequestParam = (value, paramName, desc) => 
  

изменения в

 setRequestParam = (value, paramName, desc) => () => 
  

таким образом, выполнение

 <DropdownItem onClick={this.setRequestParam(item,'Defense', 'summary')}
  

все равно передал бы параметры.

3. Используйте currentTarget с событием

 <DropdownItem onClick={this.setRequestParam}
              name = 'defenseSummary'
>

setRequestParam = (e) => {
    if (e.currentTarget.name === 'defenseSummary'){

           this.setState({
          params : {
              ...this.state.params,
              'Defense' : e.currentTarget.getAttribute("dropdownvalue")
            }
          }, function setStateCallback(){          
             console.log(this.state.params)

             this.getStatsData('Summary')
          }
        ) 
    }

    else if ( .. for different parameter possible ) { }
}

  

Итак, мои вопросы :

1. Учитывая текущую ситуацию с необходимостью выполнения другого запроса post для выпадающего элемента onclick, я делаю что-то не так? Есть другие рекомендации?
2. отличается ли решение (2: функция возвращает функцию) от решения (1: привязка функции Arorw), как в ‘создает функцию при каждом рендеринге’?
3. Предполагая, что у меня есть 30 компонентов DropdownItem, Означает ли
   «проблема с производительностью функции arrow / bind в функции рендеринга», что А) я буду загружать 30 функций каждый раз, когда я рендерю родительский компонент, которые хранятся где-то в браузере? итак, например, если я загружу страницу 100 раз, у меня где-то скопилось 3000 функций, что в основном приведет к гарантированному сбою?
   Б) или функция в основном просто повторяется 30 раз для моего родительского компонента, который также отключается при демонтаже компонента, что означает, что с ограниченным количеством элементов его можно было бы использовать?
4. Есть ли какой-либо другой рекомендуемый способ передачи различных (может быть, переменных строки? параметры для обработчика событий?