Блог

Главная - Вопросы по программированию - ReactJS: лучшая практика определения обработчиков событий

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

#javascript #html #reactjs #events #event-handling

#javascript #HTML #reactjs #Мероприятия #обработка событий

Вопрос:

Недавно я начал использовать ReactJS, и я хочу знать, какова наилучшая практика определения обработчиков событий в React. Вот как я использую обработчики событий react:

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const handleButtonClick = () => {
    setCounter(counter   1);
  };
  return (
    <div className="App">
      <button onClick={() => handleButtonClick()}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

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

 import React, { useState } from "react";
import "./styles.css";

const handleButtonClick = (setCounter, counter) => () => {
  setCounter(counter 1);
};

export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <button onClick={handleButtonClick(setCounter, counter)}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

Ссылка на CodeSandbox для второго подхода
Я хочу знать, какая наилучшая практика определения функций? Должны ли обработчики событий также определяться глобально над функциональным компонентом( App Component in this case )?

Комментарии:

1. Второй также реализован неправильно. Это будет происходить в бесконечном цикле. Мое мнение таково: если компонент имеет одну или две функции, то встроенная функция в порядке, но если ее больше, то всегда нужно создавать функцию выше render / return, поскольку она не создаст копию функции. Для functional использования компонентов useCallback

2. @ShubhamVerma, похоже, не переходит в бесконечный цикл. Отредактировал и вставил ссылку codesandbox для того же. Кроме того, в любом случае функции создаются только над отображением / возвратом. Просто хочу знать, определять ли его выше определения компонента или нет

Ответ №1:

Вам не нужно создавать дополнительную функцию внутри onClick. Просто не вызывайте это. Вызов метода onClick при срабатывании onClick.

 const handleButtonClick = () => {
  setCounter(counter   1);
};  // return function

<div onClick={handleButtonClick} />
// it will be call the handleButtonClick
// when onClick is trigger

  
 
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);
  const handleButtonClick = () => {
    setCounter(counter   1);
  };
  return (
    <div className="App">
      <button onClick={handleButtonClick}> 
        Click Me To increase counter
      </button>
      <div>
        <h4>Counter value is: </h4>
        {counter}
      </div>
    </div>
  );
}

Ответ №2:

Должны ли обработчики событий также определяться глобально над функциональным компонентом?

нет.

Определение обработчиков событий вне компонента, которые изменяют состояние компонента, нарушает целостность.

Обработчик событий внутри компонента объясняет различные взаимодействия компонента. Наличие обработчика «оболочки» просто нарушает единый уровень абстракции.

Мои два цента.