TL; DR Это зависит от ситуации и личных предпочтений.
-
Использование функции стрелки в рендере создает новую функцию каждый раз при рендеринге компонента, что может нарушить оптимизацию на основе строгого сравнения идентичности.
Это применимо только к компонентам класса и не актуально для функциональных компонентов. В функциональном компоненте функция переопределяется при каждой визуализации независимо от того, определена ли она как function, const myFunc = ... или onClick={() => ...}, потому что она привязана к вашей компонентной функции (это можно решить с помощью memo, но это выходит за рамки вашего вопроса).
избегайте косвенного обращения в коде, чтобы улучшить удобочитаемость
ИМО, я бы сказал, это зависит от обстоятельств. Иногда, особенно когда, например, просматривая PR или возвращаясь к коду, который я не видел некоторое время, мне нравится видеть имя функции в опоре компонента, например onClick={doSomething}, потому что тогда я могу пролистать контент, который меня не касается, и сосредоточьтесь исключительно на том, что мне нужно сделать для выполнения поставленной задачи. Но, , что более важно , он дает контекст тому, что происходит, через имя функции.
Да, вы правы, разработчику нужно прокрутить вниз, чтобы увидеть, где используются функции, и затем прокрутите назад, чтобы увидеть, что делает функция, но если бы я увидел компонент с несколькими кнопками, каждая с разными обработчиками, что-то вроде ниже, мне пришлось бы фактически читать каждый обработчик, пока я не нашел функцию, которую хотел изменить. Если бы вместо них они были заменены именами функций, я мог бы легко понять: «О, эта кнопка делает то же самое, а эта другая делает то же самое» без необходимости прокручивать вверх, чтобы найти объявление функции. Это особенно верно, когда функция является большой или сложной; перечитать 30-строчную функцию, у которой нет имени, просто чтобы попытаться вспомнить, что она делает / почему это очень болезненно, когда вы возвращаетесь к своему коду через 6 месяцев.
return (
<div>
<button onClick={() => ...}>Some text</button>
<button onClick={() => ...}>Some other text</button>
</div>
);
Еще одна вещь, о которой следует подумать, - это уровни гнездования. Если у вас большой рендер со множеством отступов, а затем вы добавляете сложную функцию, встроенную в реквизиты, внезапно вам приходится прокручивать в редакторе влево / вправо, что по существу заново вводит исходную проблему, которую вы пытались решить.
Являюсь ли я частью меньшинства кодировщиков?
Нет, есть варианты использования как для встроенных, так и для отдельно объявленных обработчиков. Я пишу как в свои репозитории, так и не на работе. Мои товарищи по команде делают то же самое.
Если обработчик небольшой и не требуется больших усилий, чтобы понять, что он делает (например, onClick={() => location.hash = "/redirectedPage"}), то вполне разумно и, вероятно, лучше для удобочитаемости, использовать встроенные функции ( зачем объявлять новую функцию redirectToPage, если это однострочная функция?). Для более сложных функций или глубоко вложенных компонентов часто бывает полезно объявить имя функции.
Здесь могут быть задействованы и другие факторы, такие как поддержание согласованности в базе кода, правила lint и т. Д. c., Но это некоторые из основных, которые, как мне кажется, применимы вне определенных c настроек, подобных этим.