Однонаправленный и двунаправленный поток данных — окончательное руководство по вопросам собеседования на фронтальном уровне Пт: 1

Добро пожаловать на страницу «Окончательное руководство по вопросам собеседования Front-End». В этой серии постов вы найдете самые востребованные темы на собеседованиях по Front-End, чтобы вы могли хорошо пройти их все. Даже если вы не готовитесь к собеседованию прямо сейчас, эта серия постов позволит вам быть в курсе событий и всегда быть готовым объяснить сложные темы, связанные с самыми производными технологиями построения интерфейсов.

Что такое однонаправленный?

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

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

Самая известная библиотека для фронтенд-разработки ReactJS использует однонаправленный поток данных, а такие библиотеки, как VueJS, используют двунаправленный поток данных. Давайте узнаем, в чем разница между ними.

Двунаправленный поток данных в VueJS и Angular

Такие фреймворки, как VueJS и Angular, используют двустороннюю привязку данных,

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

Это концепция, которая существует в функциях Javascript через метод .bind() и которая была реализована в этих инструментах для двунаправленного управления потоком состояния.

Давайте рассмотрим пример кода VueJS, который исследует эту концепцию:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
Вход в полноэкранный режим Выход из полноэкранного режима

Это данные в Vue, которые будут изменяться при вводе. Чтобы использовать двустороннее связывание данных в vue, мы используем атрибут v-model.

<div id='app'>
  <p>{{ message }}</p>
  <input v-model='message'>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

В этом случае ввод начнется со значения по умолчанию ‘Hello Vue.js’. Когда мы изменяем значение поля ввода, мы автоматически вызываем изменение представления, которое автоматически вызывает изменение данных. Аналогично, если мы изменим значение по умолчанию данных или модифицируем их в приложении, это будет отражено в представлении благодаря концепции двусторонней привязки данных.

Посмотрите живой пример на CodePen

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

Однонаправленный поток данных в React

В библиотеке React есть концепция однонаправленного потока данных, то есть данные передаются только от одной части к другой, но не наоборот. В случае с React единственный способ изменить то, что мы видим на экране, — это модифицировать данные (состояние). При модификации представления состояние не меняется, в отличие от Vue или Angular.

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

Давайте посмотрим пример кода на практике:

const { useState } = React

const App = () => {

  const [input, setValue] = useState("");
  const [name, setName] = useState('Chris');

  handleInput = (event) => {
    setValue(event.target.value);
  }

  updateName = (event) => {
    event.preventDefault();
    setName(input);
    setValue("");
  }

  return (
    <div className="box">
      <h1>
        Hello, <span>{name}!</span>   
      </h1>

      <form className="form">

        <div class="field">
          <label for="name-1">Update Name</label>
          <div class="control">
            <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
          </div>
        </div>
        <div class="field">
          <div class="control">
            <button onClick={updateName} class="button is-dark">Save</button>
          </div>
        </div>
      </form>

    </div>
  )
}
Вход в полноэкранный режим Выход из полноэкранного режима

Рассмотрим приведенную выше форму. Вход отвечает за обновление названия, описанного в теге h1. Обратите внимание, что единственный способ добавить состояние — это итерация с кнопкой, которая делает вызов хука useState(). Даже если бы мы изменили значение входа или использовали состояние в качестве значения для него, это не имело бы никакого эффекта без вызова функции, которая изменяет состояние. Это говорит о том, что поток всегда однонаправленный, представление не может изменить состояние и наоборот, все идет единым потоком.

Посмотрите живой пример на CodePen

Заключение

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

Этот пост является частью серии постов, следите за новостями и следите за мной на сайте dev.to, чтобы увидеть больше постов о Ultimate Front-end Interview Guide.

Следите за мной на linkedin:
https://www.linkedin.com/in/aryclenio/

Оцените статью
Procodings.ru
Добавить комментарий