Крюк со мной, чтобы узнать КРЮЧКИ - концепция реагирования

Присоединяйтесь ко мне, чтобы изучить HOOKS — концепция реакции

Изучение HOOKS — это не что иное, как использование Hooks!!!

Пожалуйста, примите мой плохой английский, потому что это мой первый пост, и еще одна причина в том, что мой родной язык — тамильский.

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

Да, разработчики Facebook понюхали и дали хуки в качестве решения для нашего раннего поиска в Google из React 16.8. Это серьезное изменение по сравнению с выпуском на самом деле с обратной совместимостью.

const [количество, setCount] = useState (0);

Любители es6 могут легко понять концепцию разрушения массива в приведенном выше коде. Давайте разберемся с концепцией первых хуков «useState».

импортировать React, {useState} из «реагировать»;

React представил useState как простую концепцию хука, и мы называем это, как указано выше, в нашем компоненте. useState — это хук, который позволяет добавлять состояние React к компонентам функций. «Count» — это состояние, а «setCount» — это функция для установки состояния.

Правила хуков:
1) Вызов хуков только на верхнем уровне
2) Вызов хуков только из функций React

Начнем с простого примера с сайта react.org.

Если вы проверите первый набор кода, где мы использовали setCount вместо setState для изменения состояния и повторного рендеринга. Такой подход упростил задачу. Да, Хукс сделал это по-своему.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
--------------------------------------------------------------------
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Мы действительно не понимаем удачное использование хуков в приведенном выше примере. Но чтобы понять, как работают хуки (учитывая, что у читателя уже была идея реагировать раньше). Если вам нравится всегда писать функциональный компонент, но вдруг вы хотите использовать управление состоянием внутри, тогда хуки придут на помощь!

Это небольшой краткий обзор useState of Hooks. Оставайтесь с нами для useEffect в моей следующей статье.