React — это «Роллс-Ройс» фронтенд-разработки, вдохновляющий на совершенство в проектировании пользовательских интерфейсов. Несомненно, React — это библиотека JavaScript для создания пользовательских интерфейсов. React фокусируется непосредственно на создании пользовательского интерфейса для веб- и мобильных приложений. React настолько популярен, гибок и декларативен, что API React делает за вас всю работу по созданию пользовательских интерфейсов. React позволяет разрабатывать многократно используемые компоненты, которые легко читаются, масштабируются и поддерживаются.

По сути, компонент React состоит из разметки HTML, стилизованной с помощью CSS, и с плавной интерактивностью, обрабатываемой с помощью JavaScript.

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

Однако в этой статье мы узнаем, как React работает с данными, которые мы используем в веб-приложениях. Данные критически важны для каждого веб-приложения, и React отлично справляется с обработкой данных, данных в состоянии компонента, передачей данных от одного компонента к другому и получением данных из источника данных API. Мы подробно рассмотрим, как React обрабатывает получение данных с помощью Fetch API.

Понимание данных и их однонаправленного потока

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

Причины не надуманные:

• Это проще для отладки, так как мы знаем, откуда поступают данные.

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

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

Данные в базе данных

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

Во-вторых, мы должны рассмотреть безопасность данных и то, как React справляется с этой задачей. Безопасность данных начинается с момента сбора данных. Могут ли пользователи отправлять HTML-содержимое на ваш внутренний сервис? Если да, то используете ли вы лучшие практики React для обеспечения того, чтобы нужные данные в нужной форме попадали в вашу базу данных? Ни один разработчик никогда не гордится системой, уязвимой для SQL-инъекций. SQL-инъекция описывает сценарий, когда играющий или плохой пользователь использует уязвимость ваших веб-приложений, внедряя в систему SQL-коды, способные, в крайнем случае, выполнять операции CRUD. Никто не хочет этого, но вы должны ожидать этого и защищаться от атак SQL-инъекций при разработке.

Представьте, что это может быть выполнено в вашей базе данных из полей ввода вашей формы:

DROP TABLE IF EXISTS dbo.Customers; 

Это определенно будет неловко!

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

Концепция неизменяемости

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

Почему мы не используем такие простые термины, как может изменяться, изменяемая (mutable) или не может изменяться, не изменяемая (immutable)?

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

Технически, типы значений JavaScript Strings являются неизменяемыми. Вы не можете напрямую изменить его значение, но вы можете переназначить его другому значению.

var strings =”John Joel”; 

Вы не можете сделать это:

strings[3] =”p”; 

Строковые значения можно изменять только с помощью некоторых методов, таких как replace(), trim() и т.д.

React говорит не мутировать (изменять) свойство state компонента напрямую. По сути, значения состояния неизменяемы. Но с оговоркой, вы можете изменить значение состояния только с помощью метода обновления функции — setState(). Это помогает привнести немного здравомыслия в культуру кодирования и облегчает отладку.

React недвусмысленно заявляет, что то, как вы будете работать с данными, зависит только от вас, даже мутации. В больших приложениях React производительность, как правило, является основной причиной, по которой мы так заботимся о том, как мутировать данные. Изменение состояний естественным образом может привести к повторному рендерингу компонентов React. Вы же не хотите, чтобы дорогостоящий повторный рендеринг снижал производительность ваших React-приложений. В redux — способ управления сложными данными состояния в React. Вы имеете дело с мутациями состояния через редукторы, а не напрямую. Таким образом, неизменяемость в React поощряет единый источник истины ваших данных. Кроме того, вы получаете более чистый код с ясностью поведения ваших функций.

Получение данных из внешнего источника данных

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

Почему именно fetch()? Она встроена в наши браузеры. Она находится прямо в объекте окна — window.fetch. Не нужно устанавливать дополнительные пакеты. Вы просто начинаете работать с обработкой Http-запросов, используя подход, основанный на обещаниях.

Давайте сделаем простой GET-запрос с помощью fetch(). Все, что нам нужно сделать, это включить конечную точку URL, к которой мы хотим сделать запрос, в метод Fetch().

import React, { useState, useEffect } from 'react';  

const App=()=> { 

    const [people, setPeople] = useState([]); 

    const [isLoading, setIsLoading] = useState(true);  

    useEffect(() => { 

        // GET request using fetch with  useEffect Hook 

        setIsLoading(true); 

        fetch('https://swapi.dev/api/people/') 

            .then(response => response.json()) 

            .then(data => setPeople(data.results)); 

        setIsLoading(false);  

    // Empty dependency array means this effect will only run once 

    }, []); 



    return ( 

        <div> 

            <h5>Get Data from an API Data Source</h5> 

            {isLoading? <p>Loading people...</p>: people.map(person => <p key={person.name}>{person.name},{person.mass}, {person.height}</p>)}            <div> 

                {} 



            </div> 

        </div> 

    ); 

}  

export default App; 

Давайте быстро разберем код:

• Мы импортируем хуки useState и useEffect, чтобы ввести их в область применения в наших приложениях.

• const [people, setPeople] = useState([]) и const [isLoading, setIsLoading] = useState(true) были установлены для управления состояниями people и isLoading.

• Затем у нас есть useEffect для обработки логики получения данных из конечной точки.

• URL конечной точки был передан в качестве параметра в fetch(‘https://swapi.dev/api/people/’).

• Обратный вызов .then() возвращает новое обещание с преобразованием ответа в данные JSON

• Второй обратный вызов .then() присваивает данные JSON ответа нашей переменной состояния — people.

• Затем мы вызываем map() для итерации по массивам возвращенных объектов people.

В заключение,

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

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

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