Немедленно вызванная стрелка действует как реактивная опора

Question

Я заметил интересную проблему в моем проекте React. Я решил проблему, следуя 1-му подходу, но я хотел бы знать разницу между следующими подходами обратного вызова при передаче в качестве опоры:

1. Функция стрелки (отлично работает внутри render())

    changeImage={ () => this.handleImageUploadModal('OPEN') }

2. Ссылка на функцию (Uncaught RangeError: превышен максимальный размер стека вызовов)

    changeImage={ this.handleImageUploadModal('OPEN') }

Answer 1

Первое - это определение функции, вы говорите ей «выполнять эту функцию при изменении». Важное слово - «определение»: вы его не исключаете, вы его определяете. У него нет команды start:

changeImage={ () => {return this.handleImageUploadModal('OPEN')}() }
// If you want it called instantly, you have to start it:     --^^

---

Вторая, которую вы должны прочитать как параметр. Более очевидный пример:

showImage={ this.shouldImageBeShown() }

Эта функция будет вызываться мгновенно, чтобы определить, следует ли нам показывать изображение или нет, и возвращает true / false -> showImage={true}.

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

changeImage={ this.openImageUploadModal }

Answer 2

changeImage={ this.handleImageUploadModal('OPEN') }

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

changeImage={ () => this.handleImageUploadModal('OPEN') }

Это означает «создать функцию с текстом () => this.handleImageUploadModal('OPEN') и передать ее вреквизит changeImage ". Вновь созданная функция не вызывается (пока), но может вызываться всякий раз, когда компонент считает это необходимым.