React Hooks: проще, чем вы думаете.

Иногда изучение нового может быть утомительным и утомительным. Однако это не относится к React Hooks . Если вы тот, кто никогда не тратил время на изучение хуков, и вы в основном используете компоненты d на основе классов , возможно, пришло время попробовать.

Когда я впервые изучал React , я использовал только компоненты на основе классов, потому что это то, чему меня учили и с чем я больше всего знаком. Однако, хотя хорошо знать, как использовать компоненты на основе Blass, они «устарели». Индустрия продолжает и будет продолжать использовать компоненты на основе функций .

Хуки были созданы как способ использования методов жизненного цикла класса и состояния внутри функций. Это по существу устраняет необходимость в компонентах на основе классов в целом.

Самый простой способ продемонстрировать это - взглянуть на состояние в компоненте на основе классов :

Четыре основных вывода, на которые следует обратить внимание:

• Состояние инициализируется state: {}.
• В Thisключевых словах для таргетинга функции и переменных в классах .
• Необходимость стрелочных функций, чтобы избежать ошибок с thisключевым словом в компонентах на основе классов .
• setState()для любых изменений в State .

Первое, что вы должны сразу заметить, это отсутствие класса .

Второе, что следует сразу после этого, - это то, как мы инициализируем State :

давайте разберемся с этим простым языком:

• termэто то, чем является ваше состояние в данный момент в любой момент. Вместо того, чтобы писать this.state.term, просто было бы term.
• setTermпо сути, setStateза исключением более индивидуализированного имени. он работает точно так же, вы можете просто выбрать, как его назвать.
• useStateэто крючок. цель состоит в том, чтобы инициализировать то, чему должен соответствовать определенный ключ в State . Поскольку мы используем строку, мы инициализируем пустую строку.