Инверсия управления (IoC) — это принцип разработки, который позволяет классам быть слабо связанными и, следовательно, их легче тестировать и поддерживать. В простом определении объекты не создают другие объекты, на которые они полагаются при выполнении своей работы. Вместо этого они получают нужные им объекты из внешнего источника. Это действительно хороший принцип проектирования (и, вероятно, лучшая практика), который младшие школьники склонны упускать из виду. Когда вы проектируете функциональные компоненты, вы всегда должны помнить об инверсии принципа управления. Если вы не знаете, функциональные компоненты — это функции, которые принимают реквизиты и возвращают JSX. У них изначально нет методов состояния или жизненного цикла, но эту функциональность можно добавить, внедрив React Hooks. Функциональные компоненты обычно используются для отображения информации. Их легко читать, отлаживать и тестировать. Давайте покопаемся в примерах и посмотрим, как это выглядит.

Пример класса

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

public class Car {

    private CreateEngine engine;

    public Car() {
        this.engine = new CreateEngine();
    }
}

Этот класс автомобилей знает, как создать двигатель и применяет его к автомобилю, теперь давайте создадим версию, которая применяет IoC.

public class Car {

    private CreateEngine engine;

    public Car(CreateEngine engine) {
        this.engine = new CreateEngine();
    }
}

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

Пример компонента React

Я думаю, что одним из наиболее очевидных примеров по этой теме является создание компонента кнопки. Я считаю, что это действительно точный и очень понятный пример. Но на самом деле есть еще один вариант использования, который не менее важен и на самом деле более распространен. Библиотеки форм. И давайте воспользуемся моей любимой библиотекой форм, react-hook-form.

export default function App() {
  const { handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="submit" />
    </form>
  );
}

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

interface ProviderProps {  
   onSubmit: () => void; 
}
export default function App({ provider: Provider }) {
  const { handleSubmit } = useForm();
  return (
    <form onSubmit={handleSubmit(provider.onSubmit)}>
      <input type="submit" />
    </form>
  );

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

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