Управляемые компоненты с реактивными крючками

Автор оригинала: anil chaudhary.

Я люблю контролируемые компоненты. Ты ?. Такой клише вопрос, но в любом случае, давайте поговорим о контролируемых компонентах с крючками.

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

Вы никогда не хотите смешивать контролируемые и неконтролируемые компоненты. Больше на это здесь React Contracted VS неконтролируемый Отказ

Управляемые компоненты лучше, когда мышление в реактивном мышлении. Таким образом, вам не нужно думать о обновлениях пользовательских пользователей. Реагирование дает вам гарантию, что пользователе UI вам синхронизируется с вашими данными практически во всех случаях.

Но создание контролируемых компонентов и потребляя их каждый раз, подходит с некоторыми компромиссами. Вы организовали данные в одном из более высоких компонентов, которые отображают контролируемый компонент. Не волнуйтесь, если предыдущие строки были немного запутаны. Давайте понять это с диаграммой

На диаграмме у нас есть один модальный, имеющий поле поиска и раздел результата. Здесь есть две точки данных: значение поиска на входе. Массив элементов данных, который используется для визуализации карт.

Этот вид модаль, имеющего подобный поиск и результаты, необходимы в нескольких местах в нашем приложении.

И каждое место поисковая логика поста варьируется. И как только у вас есть результаты с вами, есть разные логические сообщения. Несколько мест, которые вам также нужно установить значение поиска программно, на некоторых обновлениях.

Теперь это определенно остроенная ситуация здесь. Но этот сценарий настолько распространен в реальных приложениях.

Чтобы сохранить этот пользовательский интерфейс полностью воспроизведенным, мы пойдем на контролируемые компоненты, помните, что я сказал вам, что я люблю контролируемые компоненты, и теперь я могу предположить, что ты тоже это любишь.

Давайте попробуем написать иерархию компонентов для этой ситуации.

Это будет грубая иерархия, мы будем говорить в остальной части статьи

Я не пойду очень глубоко в контролируемый компонент. Но позвольте мне дать вам некоторое понимание об этом.

Управляемые компоненты Сохраняет контроль данных с реагированием. Они полагаются на реагирование на обновление UI в синхронизации с данными, доступными для компонента.

Подробнее об этом здесь Управляемые компоненты

А потом есть неконтролируемые компоненты Отказ который принимает ведение в свою руку. Они обязательно изменили свойства оказанных результатов. Неконтролируемые компоненты

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

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

Давайте посмотрим, как родительский компонент будет использовать этот дочерний компонент.

function SearchAndResultView({ search, setSearch, result }) {
  return (
    
      
      
    
  );
}

function AnyofyourComponent() {
  const [search, setSearch] = React.useState("");
  const [result, setResult] = React.useState([]);

  async function onSearch(e) {
    const value = e.target.value;
    setSearch(value);
    // do some API call

    const res = await fetch("https://random-api");
    setResult(res.data);
  }
  return (
    
  );
}

Примечание. Есть лучшие способы организации текущей иерархии компонентов, но давайте сосредоточимся только на контролируемых компонентах.

Обратите внимание, что все, что нам нужно было сделать, чтобы использовать SearchAndResultView.

Мы должны иметь два состояния, один для поиска и один для результата. В некоторых сценариях эти виды определений становятся настолько большими и разбросанными. В следующий раз вы попытаетесь использовать компонент, он ест все ваше время

Мы должны сделать подобную вещь везде, где мы используем этот компонент SearchAntResultView.

Это то, как система принципиально контролируемых компонентов работает в ReactJS. В этом нет ничего плохого. Но мы можем удалить эту повторяющуюся работу?

Да, мы можем, вот почему этот блог 😄

Теперь давайте соблюдаем привязку ниже фрагмента

function useSetUp({ initialSearch = "", initialResult = [] }) {
  const [search, setSearch] = React.useState(initialSearch);
  const [result, setResult] = React.useState(initialResult);

  return {
    search,
    setSearch,
    result,
    setResult,
  };
}

function SearchAndResultView({ search, setSearch, result }) {
  return (
    
      
      
    
  );
}

SearchAndResultView.useSetup = useSetUp;

function AnyofyourComponent() {
  const { search, setSearch, result } = SearchAndResultView.useSetup();

  async function onSearch(e) {
    const value = e.target.value;
    setSearch(value);
    // do some API call

    const res = await fetch("https://random-api");
    setResult(res.data);
  }
  return (
    
  );
}

Обратите внимание, как утверждения для определения состояний теперь перемещаются в ISETETETUP крюк. Теперь каждый компонент, который хочет использовать SearchAntResultView, не должен сначала писать определения состояний, чтобы использовать контролируемый компонент.

Они могут использовать крюку INSETETUP с контролируемым компонентом

Этот способ написания контролируемых компонентов удивительно улучшил свой опыт работы с контролируемыми компонентами. Это простой, но все же мощный способ написания компонентов в Reactjs. Это не могло произойти без реагирования крючков.

У вас есть полный элемент управления для изменения значения компонента SearchAntResultView в любое время. Таким образом, у нас есть все контролируемые преимущества компонентов, а также простота использования.

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

Спасибо!