Автор оригинала: FreeCodeCamp Community Member.

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

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

Как визуализации данных в пользовательском интерфейсе в реакции

Чтобы сделать что-нибудь на экране, мы используем Reactom.runder Метод в реакции.

Он имеет следующий синтаксис:

ReactDOM.render(element, container[, callback])

• элемент Может быть любой HTML-элемент, JSX или компонент, который возвращает JSX
• Контейнер это элемент на пользовательском интерфейсе, внутри которого мы хотим рендерировать данные
• Обратный вызов Дополнительная функция, которую мы можем пройти, которая вызывается, как только что-то отображается или повторно визуализируется на экране

Посмотрите на следующий код:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

ReactDOM.render(
Welcome to React!
, rootElement);

Вот a Код Sandbox Demo Отказ

Здесь мы просто делаем один элемент H1 на экран.

Чтобы сделать несколько элементов, мы можем сделать это, как показано ниже:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

ReactDOM.render(
  

    
Welcome to React!
    
React is awesome.
  
,
  rootElement
);

Вот a Код Sandbox Demo Отказ

Мы также можем вывести JSX и поставить его в переменную, которая является предпочтительным способом рендеринга контента, если он становится больше, вроде это:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const content = (
  

    
Welcome to React!
    
React is awesome.
  
);

ReactDOM.render(content, rootElement);

Вот a Код Sandbox Demo Отказ

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

Если вы хотите понять JSX подробно, и его различные важные особенности, проверьте мою статью здесь.

Теперь давайте покажем кнопку и какой-нибудь текст на экране:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
};

const content = (
  

    Increment counter
    
Counter value is {counter}
  
);

ReactDOM.render(content, rootElement);

Вот a Код Sandbox Demo Отказ

Как вы можете видеть, когда мы нажимаем на кнопку, счетчик Значение увеличивается, как вы можете видеть в консоли. Но на UI это не обновляется.

Это потому, что мы редаем Содержание JSX только один раз используя Reactom.runder Метод, когда страница загружена. И мы не называем это снова – так что даже если ценность счетчик Обновление, он не отображается на UI. Итак, давайте исправим это.

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

let counter = 0;

const handleClick = () => {
  counter++;
  console.log("counter", counter);
  renderContent();
};

const renderContent = () => {
  const content = (
    

      Increment counter
      
Counter value is {counter}
    
  );

  ReactDOM.render(content, rootElement);
};

renderContent();

Вот a Код Sandbox Demo Отказ

Здесь мы переехали Содержание Jsx и Reactom.runder Способ вызова внутри Rendercontent функция. Затем, как только он определил, мы вызываем функцию, чтобы она представла содержимое на UI на странице нагрузки.

Обратите внимание, что мы также добавили Rendercontent Функция вызова внутри Handleclick функция. Так что каждый раз, когда мы нажимаем на кнопку, Rendercontent Функция будет вызываться, и мы увидим обновленный счетчик на UI.

Как видите, он работает как ожидалось и счетчик Значение правильно отображается на UI.

Вы можете подумать, что это дорого, чтобы снова восстановить весь домос в каждой кнопке щелчок – но это не так. Это связано с тем, что React использует виртуальный алгоритм DOM, где он проверяет то, что было изменено на пользовательском интерфейсе, и только повторно отображается элементы, которые были изменены. Таким образом, весь дом не восстанавливается снова.

Вот a Предварительный просмотр Ссылка Для кода песочница попробовать сами.

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

Но все же, это не осуществимо называть Rendercontent Функция каждый раз, когда мы хотим обновить пользовательский интерфейс. Так что реагируют добавляли концепцию состояния.

Введение в государство в реагировании

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

В реакции весь код, который мы пишем, определяется внутри компонента.

В основном есть два способа создания компонента в реакции:

• Компонент на основе класса
• Функциональный компонент

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

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

Вы можете создать компонент, используя ключевое слово класса ES6 и расширяя Компонент Класс, предоставленный реакцией, как это:

import React from "react";
import ReactDOM from "react-dom";

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.state.counter = this.state.counter + 1;

    console.log("counter", this.state.counter);
  }

  render() {
    const { counter } = this.state;

    return (
      

        Increment counter
        
Counter value is {counter}
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Вот a Код Sandbox Demo Отказ

Давайте рассмотрим, что мы здесь делаем.

• Внутри функции конструктора мы впервые звоним супер Прохождение реквизит к этому. Тогда мы определили состояние как объект с счетчик как свойство объекта.
• Мы также обязательно это контекст к Handleclick Функция, так что внутри Handleclick Функция мы получаем правильный контекст для это Отказ
• Тогда внутри Handleclick Функция, мы обновляем счетчик и войти в систему к консоли.
• И внутри оказывать Метод, мы возвращаем JSX, что мы хотим рендер на UI.

счетчик правильно обновляется, как вы можете видеть в консоли – но он не обновляется на UI.

Это потому, что мы напрямую обновляем состояние внутри Handleclick Функция как:

this.state.counter = this.state.counter + 1

Таким образом, реагируйте не восстанавливают компонент (и это также плохая практика для непосредственного обновления состояния ).

Синтаксис setstate.

Чтобы сделать изменение состояния, реагировать дает нам SetState Функция, которая позволяет нам обновить значение состояния.

SetState Функция имеет следующий синтаксис:

setState(updater, [callback])

• Updater может быть либо функцией или объектом
• Обратный вызов является дополнительной функцией, которая выполняется после успешного обновления состояния

Как использовать функцию для обновления состояния в React

Давайте изменим выше кода песочница использовать SetState Функция для обновления состояния.

Вот обновленная Код Sandbox Demo Отказ

Если вы проверяете обновленные Handleclick Функция, это выглядит так:

handleClick() {
  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });

  console.log("counter", this.state.counter);
}

Здесь мы передаем функцию в качестве первого аргумента для SetState функция, и мы возвращаем новый объект штата с счетчик увеличивается на 1 на основе предыдущего значения счетчик Отказ

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

Если вы заметите, мы правильно получаем обновленное значение счетчик на пользовательском интерфейсе. Но в консоли мы получаем предыдущие счетчик Значение, даже если мы добавили console.log после this.setState вызов.

Это означает, что, хотя мы позвонили SetState увеличить счетчик Значение на 1, это не происходит сразу. Это потому, что когда мы называем SetState Функция, весь компонент повторно отображается – поэтому реагирование необходимо проверить, что все необходимо изменять с использованием алгоритма виртуального DOM, а затем выполнять различные проверки для эффективного обновления UI.

Это причина, по которой вы не можете получить обновленное значение для счетчик Сразу после звонка к SetState Отказ

Если вы хотите получить обновленное значение состояния сразу после SetState Звоните, вы можете пройти функцию в качестве второго аргумента для SetState Вызов которого будет выполняться после обновления состояния.

Вот a Код Sandbox Demo с этим изменением.

Как видите, мы получаем правильное значение счетчик В консоли, как только это обновляется на UI.

В приведенной выше демонстрации Handleclick Функция выглядит так:

handleClick() {
  this.setState(
    (prevState) => {
      return {
        counter: prevState.counter + 1
      };
    },
    () => console.log("counter", this.state.counter)
  );
}

Так вот, для SetState Вызов функции, мы передаем два аргумента. Первая – это функция, которая возвращает новое состояние, а вторая – это функция обратного вызова, которая будет называться, когда состояние будет обновлено. Мы просто регистрируем обновленное значение счетчика в консоль в функции обратного вызова.

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

componentDidUpdate(prevProps, prevState) {
  if (prevState.counter !== this.state.counter) {
    // do something
    console.log("counter", this.state.counter);
  }
}

Вот a Код Sandbox Demo Отказ

Вы можете найти больше информации о том, почему использовать ComponentDidupdate вместо SetState Обратный вызов здесь Отказ

Как упростить государство и декларацию метода

Если вы видите код конструктора в вышеуказанном коде Sandbox Demos, вы увидите, что это выглядит так:

constructor(props) {
  super(props);

  this.state = {
    counter: 0
  };

  this.handleClick = this.handleClick.bind(this);
}

Использовать это ключевое слово внутри Handleclick Обработчик событий, мы должны связать его в конструкторе, как это:

this.handleClick = this.handleClick.bind(this);

Кроме того, чтобы объявить государство, мы должны создать конструктор, добавить супер Позвоните в него, а затем мы можем объявить государство.

Это не просто громоздко, но также делает код без необходимости сложного.

По мере увеличения количества обработчиков событий, количество .bind Звонки также увеличиваются. Мы можем избежать этого использовать синтаксис свойств класса.

Вот обновленная Код Sandbox Demo с синтаксисом свойств класса.

Здесь мы переместили состояние непосредственно внутри такого класса:

state = {
   counter: 0
};

и HandlerClick Обработчик событий изменяется на синтаксис функции стрелки, как это:

handleClick = () => {
  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });
};

Как функции стрелки не имеют своих это Контекст, это примет контекст как класс, поэтому нет необходимости использовать .bind метод.

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

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

Если вы хотите узнать больше об этом синтаксисе свойств класса Свойства, проверьте Моя статья здесь Отказ

Как использовать SnaThand ES6 Snathand

Если вы проверяете SetState Вызов функции в вышеуказанном коде песочница, похоже, это выглядит так:

this.setState((prevState) => {
  return {
    counter: prevState.counter + 1
  };
});

Это много кода. Просто для возврата объекта из функции мы используем 5 строк кода.

Мы можем упростить его на одну строку, как показано ниже:

this.setState((prevState) => ({ counter: prevState.counter + 1 }));

Здесь мы завернули объект в круглых скобках, чтобы сделать его неявно возвращением. Это работает, потому что если у нас есть одно оператор в функции стрелки, мы можем пропустить ключевые слова возврата и вьющиеся скобки, подобные этому:

const add = (a, b) => { 
 return a + b;
}

// the above code is the same as below code:

const add = (a, b) => a + b;

Но поскольку открытие вьющиеся кронштейна считается началом функционального тела, нам нужно обернуть объект внутри круглых скобок, чтобы он работал правильно.

Вот обновленная Код Sandbox Demo с этим изменением.

Как использовать объект как состояние обновления в реакции

В приведенном выше коде мы использовали функцию в качестве первого аргумента для SetState Но мы также можем пройти объект как аргумент.

Вот a Код Sandbox Demo Отказ

Код компонента выглядит так:

class User extends React.Component {
  state = {
    name: "Mike"
  };

  handleChange = (event) => {
    const value = event.target.value;
    this.setState({ name: value });
  };

  render() {
    const { name } = this.state;

    return (
      

        
        
Hello, {name}
      
    );
  }
}

Здесь мы добавили входное текстовое поле, в котором пользователь набирает их имя, и он отображается ниже TextBox в качестве типов пользователей в TextBox.

В штате мы инициализировали свойство имя для Майк И мы добавили Onchange Обработчик к входному текстовому поле, как это:

state = {
  name: "Mike"
};

...

Поэтому, когда мы набираем что-нибудь в текстовом поле, мы обновляем состояние со значением, набранным, передаваем объект к SetState функция.

handleChange = (event) => {
  const value = event.target.value;
  this.setState({ name: value });
}

Ответ: Передайте объект, если вам не нужно Превзойти Параметр Чтобы найти следующее значение состояния. В противном случае пропустите функцию как первый аргумент для SetState Отказ

Но вам нужно знать о одной проблеме с прохождением объекта в качестве аргумента.

Посмотрите на Этот код Sandbox Demo Отказ

В приведенной выше демонстрации Handleclick Метод выглядит так:

handleClick = () => {
  const { counter } = this.state;
  this.setState({
    counter: counter + 1
  });
}

Мы принимаем текущую стоимость счетчик И увеличивая его на 1. Это работает нормально, как вы можете увидеть ниже:

Теперь посмотрите на Этот код Sandbox Demo который является модифицированной версией предыдущего кода Sandbox Demo.

Наше Handleclick Способ выглядит так сейчас:

handleClick = () => {
  this.setState({
    counter: 5
  });

  const { counter } = this.state;

  this.setState({
    counter: counter + 1
  });
}

Здесь мы впервые устанавливаем счетчик значение до 5, а затем увеличивая его на 1. Итак, ожидаемое значение счетчик 6. Давайте посмотрим, есть ли это так.

Как вы можете видеть, когда мы нажимаем кнопку в первый раз, мы ожидали, что счетчик Значение, чтобы стать 5 – но он становится 1, и на каждом последующем кликете он увеличивается на 1.

Это потому, что, как мы видели ранее, SetState Функция асинхронная по своей природе. Когда мы называем SetState , значение счетчик Не становится 5 немедленно, так что на следующей строке мы получаем счетчик значение 0, к которому мы инициализировали состояние в начале.

Так что это становится 1, когда мы называем SetState снова увеличить счетчик К 1, и он продолжает увеличивать только на 1.

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

Вот a Код Sandbox Demo Отказ

В приведенной выше демонстрации Handleclick Способ выглядит так сейчас:

handleClick = () => {
  this.setState({
    counter: 5
  });

  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });

  this.setState((prevState) => {
    return {
      counter: prevState.counter + 1
    };
  });
}

Как вы можете видеть, когда мы сначала нажимаем на кнопку, значение счетчик становится 7. Это как ожидалось, потому что сначала мы установили его на 5, а затем увеличили его на 1 дважды, так что он становится 7. И он остается в 7, даже если мы нажимаем кнопку несколько раз, потому что на каждом щелчке мы Установка его до 5 и увеличивая дважды.

Это потому, что внутри Handleclick Мы звоним SetState Чтобы установить счетчик значение до 5, передавая объект как первый аргумент для SetState функция. После этого мы назвали два SetState Звонит, где мы используем функцию в качестве первого аргумента.

Так как эта работа правильно?

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

Из-за этого отреагируйте не сразу же сразу с новым счетчик значение. Вместо этого он объединяет все SetState звонки и обновления счетчик на основе предыдущего значения счетчик Как мы использовали Prevstate.Counter рассчитать счетчик значение.

И однажды все SetState Вызовы успешно завершены, только затем реагирует повторно представляет компонент. Так что даже если есть три SetState Вызовы, Rect Re-Render составляют компонент только один раз, что вы можете подтвердить, добавив console.log Заявление внутри оказывать метод.

Вы можете не позвонить SetState Опять же, как мы сделали в вышеуказанной демонстрации, но вы можете назвать его в другой функции, как показано ниже:

state = {
 isLoggedIn: false
};

...

doSomethingElse = () => {
 const { isLoggedIn } = this.state;
 if(isLoggedIn) {
   // do something different 
 }
};

handleClick = () => {
  // some code
  this.setState({ isLoggedIn: true);
  doSomethingElse();
}

В приведенном выше коде мы определили isloggedin состояние, и у нас есть две функции Handleclick и DOSOMOTLETHELDELSE Отказ Внутри Handleclick Функция, мы обновляем isloggedin Государственная стоимость для правда И сразу же мы называем DOSOMOTLETHELDELSE функция на следующей строке.

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

Вот почему реагировать добавленные методы жизненного цикла, такие как ComponendDidupdate сделать что-то, когда состояние или реквизиты обновляются.

Как объединить SetState вызовы в реакции

Посмотрите на Эта кодовая коробка демонстрация Отказ

Вот у нас есть Имя пользователя и счетчик Свойства, объявленные в этом штате:

state = {
  counter: 0,
  username: ""
};

и рулетчик и рулиться Обработчики событий объявили так:

handleOnClick = () => {
  this.setState((prevState) => ({
    counter: prevState.counter + 1
  }));
};

handleOnChange = (event) => {
  this.setState({
    username: event.target.value
  });
};

Проверьте SetState Вызывает в вышеуказанных функциях. Вы можете увидеть это внутри рулетчик Функция, мы только устанавливаем состояние для счетчик , а внутри рулиться Функция мы устанавливаем только состояние для Имя пользователя Отказ

Поэтому нам не нужно устанавливать состояние для обоих переменных состояний одновременно, как это:

this.setState((prevState) => ({
    counter: prevState.counter + 1,
    username: "somevalue"
}));

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

Как видите, мы успешно меняем счетчик и Имя пользователя независимо друг от друга.

Как использовать состояние в функциональных компонентах в реакции

До сих пор мы видели, как использовать состояние в классовых компонентах. Давайте теперь посмотрим, как использовать его в функциональных компонентах.

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

Эти компоненты принимают только реквизиты и возврат какой-то JSX.

Функциональные компоненты делают код более короткими и проще для понимания и тестирования.

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

Посмотрите на Этот код Sandbox Demo Отказ

Здесь мы загружаем список из 20 случайных пользователей из Случайный генератор пользователя API , когда компонент загружен внутри ComponentDidmount Метод такой:

componentDidMount() {
  axios
    .get("https://randomuser.me/api/?page=0&results=20")
    .then((response) => this.setState({ users: response.data.results }))
    .catch((error) => console.log(error));
}

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

{users.map((user) => (
  
))}

Здесь мы передаем все данные, которые нам нужно отображать Пользователь составная часть.

Пользователь Компонент выглядит так:

const User = (props) => {
  const { name, email } = props;
  const { first, last } = name;

  return (
    

      

        Name: {first} {last}
      
      
Email: {email} 
      

    
  );
};

Этот Пользователь Компонент является функциональным компонентом.

Функциональный компонент – это функция, которая начинается с буквы капитала и возвращает JSX.

Всегда не забудьте начать имя компонента со столицей, как Пользователь Будь то классовый компонент или функциональный компонент. Вот как реагирует от нормальных элементов HTML, когда мы используем их как Отказ

Если мы используем Реагирование проверит на HTML-элемент с именем Пользователь Отказ Поскольку такого HTML-элемента нет, вы не получите желаемый выход.

В вышеуказанном Пользователь Функциональный компонент, мы получаем опоры, переданные компоненту внутри реквизит Параметр функции.

Итак, вместо использования Это .props Как у классов компонентов, мы используем только реквизит Отказ

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

Следовательно, функциональные компоненты являются предпочтительными над классовыми компонентами.

Как только у нас есть реквизит Мы используем синтаксис деструктуризации объекта, чтобы получить из него значения и отображать на UI.

Как использовать состояние в реактивных крючках

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

Итак, теперь нет никакой разницы между компонентами на основе классовых компонентов и функциональными компонентами.

Оба они могут иметь методы состояния и жизненного цикла.

Но реактивный крюки теперь предпочтительны для написания компонентов реагирования, потому что они делают код короче и легче понять.

Вы будете редко найти компоненты React Components, написанные в настоящее время компоненты класса.

Чтобы объявить состояние, используя реактивные крюки, нам нужно использовать Уместите крюк.

Уместите Крюк принимает параметр, который является начальным значением состояния.

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

Уместите Крюк возвращает массив, первое значение которого является текущее значение состояния. Второе значение – это функция, которую мы будем использовать для обновления состояния, аналогичного SetState метод.

Давайте возьмем пример классового компонента, который использует состояние. Мы преобразуем его в функциональный компонент, используя крюки.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    counter: 0
  };

  handleOnClick = () => {
    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));
  };

  render() {
    return (
      

        
Counter value is: {this.state.counter} 
        Increment
      
    );
  }
}

ReactDOM.render(, document.getElementById('root'));

Вот a Код Sandbox Demo который написан с использованием классов компонентов.

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

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [counter, setCounter] = useState(0);

  return (
    

      

        
Counter value is: {counter} 
         setCounter(counter + 1)}>Increment
      
    
  );
};

ReactDOM.render(, document.getElementById("root"));

Вот a Код Sandbox Demo который написан с помощью реактивных крюков.

Как видите, использование React Clots делает код намного короче и легче понять.

Давайте понять вышеуказанный код.

• Использовать Уместите Крюк, нам нужно импортировать его, так как мы сделали его в первой строке.
• Внутри компонента приложения мы называем Уместите Прохождение 0 как начальное значение и использование разрушительной синтаксиса. Мы сохранили значения массива, возвращенные Уместите в счетчик и SetCounter Переменные.
• Это обычная конвенция для префикса имени функции, используемого для обновления состояния с помощью Установить Ключевое слово как в SetCounter Отказ
• Когда мы нажимаем кнопку приращения, мы определяем встроенную функцию и вызов SetCounter Функция, передавая обновленное значение счетчика.
• Обратите внимание, что, поскольку у нас уже есть значение счетчика, мы использовали это, чтобы увеличить счетчик, используя setcounter (счетчик + 1)
• Поскольку в линейном удалении есть единое описание, нет необходимости перемещать код в отдельную функцию. Хотя вы можете сделать это, если код внутри обработчика становится сложным.

Если вы хотите узнать подробнее о Уместите и другие реактивные крючки (наряду с примерами), затем проверьте мой Введение в реактивный крюк статья.

Спасибо за прочтение!

Хотите узнать все функции ES6 + подробно, включая пусть и const, обещает, различные методы обещания, массив и деструктурирование объектов, функции стрелки, Async/ждут, импортируют и экспортируют и намного больше с нуля?

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

Кроме того, вы можете проверить мой Бесплатно Введение в React Router Курс для изучения React Router с нуля.

Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn Отказ