Как передать переменные в ссылку на функцию?

Question

В режиме native native, когда у вас есть функции, которые должны запускаться при рендеринге и которые должны передавать переменные, большинство людей предлагают использовать

onPress{() => this.functionName(variable)}

Однако при работе с большими списками и сложными компонентами вы должны оптимизироватьваш код.Создание новой функции для каждого renderItem в flatList снижает производительность, иногда очень сильно, в зависимости от того, сколько функций на renderItem вы создаете.Поэтому мы предлагаем перейти от создания функции при рендеринге к использованию ссылки на функцию.Вот так:

functionName = () => {
   //code
}

onPress={this.functionName}

Однако я не смог выяснить, как передать переменные в функцию с помощью этого метода.

Если вы сделаете это:

onPress={this.functionName(variable}

Он просто мгновенно запустит функцию при загрузке компонента.

Есть идеи?

Answer 1

Вы можете передать variable в качестве параметра значения для этого элемента, например,

<button
 value={variable}
 onPress={this.functionName}>
 click
</button>

Затем вы можете "подобрать" эту переменную как:

fuctionName = e => {
 const yourVariable = e.target.value;
 // now you have access to your variable through the const declaration
}

Answer 2

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

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

class Component extends React.Component {
  functionName = (e) => {
    const { variable } = this.props
    // run logic on the event and variable
  } 

  render() {
    // some code
    onPress={this.functionName}
  }
}

Вы заметите с помощьюэтот подход functionName объявляется только один раз.

Недостаток производительности в этом подходе состоит в том, что теперь вам нужно создать другой компонент (и, возможно, методы жизненного цикла, которые идут с классом), чтобы передать variableкак опора, чтобы обойти необходимость в карри.

Answer 3

Я настоятельно рекомендую использовать curry для передачи аргумента.

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

Вы бы определили свою функцию так:

functionName = variable => event => {
 //code 
}

Затем вы можете продолжить и вызвать вашу функцию в методе рендеринга:

onPress={this.functionName(variable)}

Это здоровостатья, если вы хотите узнать больше: Curry In JS

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

В любом другом случае вы также можете делать то, что предлагают официальные React Docs: React Docs при передаче аргументов обработчикам событий

Удачи!

Answer 4

Я пишу этот ответ как ученик.Так что, возможно, потребуется некоторое уточнение.Когда я начинаю кодировать с JS и React, я сталкиваюсь с этой проблемой (благодаря Линтеру) и немного искал, чтобы изучить лучшие практики.Но я не мог найти какой-либо оптимизированный способ использовать переменную напрямую, как это.Что я делаю для этих ситуаций:

• Если я рендерим список элементов, я создаю свой собственный компонент, как предлагается здесь: реагировать / jsx-no-bind Итак, передать функцию обратного вызова и переменную, сделать работу и использовать эту функцию обратного вызова.Да, здесь есть работа, создающая кучу функций обработки.Но, если это оптимизированный способ, грязные руки не проблема.

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

Answer 5

В вашем конструкторе (или всякий раз, когда доступно variable), вы можете предварительно связать функцию только один раз:

this.handle_press = this.functionName.bind(this, variable);