Официальный сайт React описывает React, библиотеку JavaScript для создания пользовательских интерфейсов. React на самом деле написал страницу фреймворка пользовательского интерфейса или библиотеки, библиотеки, которая была просто пользовательским интерфейсом.
Хотя React — это всего лишь библиотека пользовательского интерфейса, то, как он отображает страницы, стоит изучить. DOM динамически генерируется JSX для отображения пользовательского интерфейса страницы. У него нет ни архитектуры, ни шаблонов, ни паттернов проектирования, ни роутинга, ни управления данными, так сказать, он не может ничего, кроме рендеринга пользовательского интерфейса.
Но для большого и сложного веб-сайта шаблоны проектирования и управление данными необходимы, поэтому, если мы используем только React, нет возможности разрабатывать крупномасштабные веб-приложения.
Например, на рисунке ниже он представляет структуру компонентов React, а веб-сайт отображает пользовательский интерфейс в виде дерева компонентов.
Все мы знаем, что поток данных в React односторонний, и он всегда передается сверху вниз.Данные могут передаваться от родительских компонентов к дочерним компонентам через реквизиты, но предположим, что нам нужно передать данные узла Banner в в нижней части дерева компонентов. Учитывая индекс верхнего уровня, как компоненты должны взаимодействовать в это время?
Следуя принципу односторонней передачи данных React, мы не можем передавать данные напрямую, но можем передавать их слой за слоем, вызывая функцию родительского компонента через обратный вызов функции. То есть Banner вызывает обратный вызов для передачи данных в Main, а Main затем передает данные в Index через обратный вызов.
На самом деле, на больших сайтах очень часто делятся такими данными, и если мы пропустим их слой за слоем через функции обратного вызова, вы обнаружите, что код всего сайта станет очень отвратительным. В основном ваш код находится в неподдерживаемом состоянии. И накладные расходы на обработку данных таким образом очень велики. Небрежный человек, скорее всего, попадет в бесконечный цикл.
Поэтому, когда наш веб-сайт сложен до определенного уровня, нам нужны шаблоны проектирования, возможно, вы уже знакомы с MVC, MVVM, MV * раньше. Но для React мы также можем использовать архитектурный шаблон, который больше соответствует дизайнерским идеям React, Redux.
Redux — это шаблон проектирования и решение архитектуры проекта, оно не зависит ни от какой библиотеки или фреймворка, его можно использовать не только в React, но и в Angular и Vue.
Используя архитектуру Redux, все компоненты в основном не взаимодействуют друг с другом, а данные хранятся в хранилище данных, называемом хранилищем.
Используя Redux, мы можем удалить данные (состояние) в компоненте и сохранить все данные в хранилище (хранилище) данных Redux.Если какой-либо компонент в компоненте должен использовать данные, этот компонент может перейти к данным склад, чтобы заявить о себе. Высокоуровневое имя — подписка. Если данные в хранилище обновляются в компоненте, хранилище будет передавать последние данные всем компонентам, подписанным на эти данные, что является принципом Redux.
Redux — это хранилище данных, которое единообразно хранит данные и обрабатывает отношения между ними, одновременно изолируя данные и пользовательский интерфейс.
Цель использования Redux — сделать изменения состояния контролируемыми и предсказуемыми. Хотя Redux в принципе кажется простым, понять его рабочий процесс сложнее.
Это в основном потому, что его метод потока данных не особенно интуитивно понятен и чем-то похож на метод, управляемый событиями.Мы знаем, что самая сложная часть разработки, управляемой событиями, — отладка. В Redux используется множество малопонятных технических терминов, таких как Action, Reducer, Dispatch и т. д. Нам трудно понять направление Redux, пока мы не поймем эти термины. Кроме того, документация Redux не близка народу, и везде есть новые понятия, такие как чистые функции, потоки, наблюдаемые и неизменяемые.
Вообще говоря, использование Redux создаст хранилище для хранения данных.В этом хранилище есть несколько редукторов, а затем нам нужно использовать компоненты React для визуализации пользовательского интерфейса.Кроме того, будет несколько инструкций Action, соответствующих редьюсерам.
Редьюсеры в магазине объединяются вместе, чтобы сформировать хранилище данных в проекте. То, что Redux называет состоянием, — это данные. Компонент React получает данные путем подписки на Store, а затем использует данные для визуализации пользовательского интерфейса. Пользовательский интерфейс отображается пользователю через дисплей. Пользователь взаимодействует с компонентом с помощью мыши и клавиатуры. Изменение интерфейса неизбежно. данные во время взаимодействия.Поток является односторонним, поэтому компоненты React имеют разрешение только на чтение данных, а компоненты пользовательского интерфейса без разрешения на запись не могут напрямую обращаться к Store для изменения данных.
Таким образом, пользовательский интерфейс должен отправить команду действия в Магазин, чтобы позволить Магазину изменить себя.Процесс распространения этой команды называется отправкой. После того, как инструкция Action попадает в хранилище, она может пройти через несколько промежуточных программ промежуточного слоя для предварительной обработки данных.Здесь также осуществляется асинхронная обработка данных.После предварительной обработки данные будут переданы редьюсеру вместе с действием, и Редюсер выполнит действие, описанное в действии. Инструкции по обновлению состояния данных. Когда состояние будет обновлено, Магазин передаст данные компоненту, который на него подписывается. Компонент повторно отобразит пользовательский интерфейс в соответствии с новым данные, и пользователь может увидеть изменение. Видно, что на практике архитектура Redux относительно сложна.
Приведенное выше описание все еще относительно сложно, но не паникуйте, давайте упростим эту картину, оставим только несколько основных компонентов и узнаем о Redux, изучая упрощенный процесс.
В упрощенных шести слоях мы оставляем только четыре части: Редьюсер, Хранилище, компоненты React и Действия. Для того, чтобы было понятнее, мы убрали здесь Reducer из Магазина, по сути они одно целое.
Магазин хранит глобальные данные.Для проекта Redux есть только один магазин, и мы можем думать о нем как о хранилище данных с функцией push. Мы можем использовать WeChat Moments, чтобы понять эту концепцию. Например, если вы добавите кого-то в друзья, как только этот человек опубликует свой статус в Моментах, он будет немедленно отправлен вам. Добавление друзей — это подписка на данные, а отправка круга друзей — это отправка данных.
Редуктор — это метод, который помогает хранить данные процесса.Метод — это процесс, функция, а не конкретный объект.Редуктор может помочь хранилищу инициализировать данные, изменять данные и удалять данные.Вы можете удивиться, почему мы используем Редуктор так много проблем, чтобы обрабатывать данные, а не изменять их непосредственно в Магазине, на самом деле причина очень проста. Например, если вы видите опечатку в Моментах вашего друга, вы не можете напрямую изменить его статус Моментов.
Ни один компонент уровня UI не имеет прав на изменение данных в Store.По принципу одностороннего потока данных они доступны только для чтения и не могут быть записаны.Вы можете только позвонить ему или отправить короткое сообщение, чтобы уведомить его изменить его, и он изменит его после модификации. Звонок ему или текстовое сообщение, чтобы уведомить его, является действием, а процесс звонка ему или текстового сообщения, чтобы уведомить его, является рассылкой сообщений действия. Процесс собственной модификации круга друзей и есть редуктор.
Наконец, после того, как он его модифицировал, WeChat снова отправит вам новости, а именно подписку и push-уведомление.
Таким образом, Store — это хранилище данных с функцией push в Redux. Reducer — это способ, которым Store обрабатывает данные, что может помочь Store инициализировать, изменять или удалять данные. Действия — это инструкции по обновлению данных, которые сообщают Reducer, как обрабатывать данные. Итак, процесс Redux на самом деле очень ясен.
Сначала создайте Хранилище хранилища данных, и Редьюсер одновременно инициализирует состояние данных. Компонент React подпишется на Store, данные в Store будут отправлены, а затем будет отображен пользовательский интерфейс.
Если компоненту необходимо изменить данные, он отправит действие, этот процесс называется отправкой. Действие будет перехвачено Store в зависимости от событий, Store передаст свои текущие данные и инструкции в Reducer, а Reducer обновит данные. После того, как Reducer будет обновлен, он выведет новое состояние в Store, а после того, как Store получит новое состояние, он передаст новые данные компонентам React, которые на него подписаны. Затем снова выполните визуализацию пользовательского интерфейса. Это полный рабочий процесс Redux.
Redux — это шаблон проектирования, а также решение архитектуры проекта, оно не зависит ни от какой библиотеки или какого-либо фреймворка, но все привыкли использовать Redux и React вместе. Здесь мы представляем использование Redux, во избежание путаницы мы не используем никакой фреймворк.
Прежде всего, вы можете установить плагин redux в проект через npm.Как упоминалось ранее, Store — это место для сохранения данных. Во всем приложении может быть только один Store. Redux предоставляет функцию createStore для генерации Store. .
import { createStore } from 'redux'
const store = createStore(fn);
Здесь createStore должна получить функцию Эта функция используется для обработки операции действия, которая является редуктором, о котором мы упоминали ранее, поэтому она должна получить параметр действия, поскольку она помогает Store обрабатывать данные, поэтому ей также необходимо для получения исходных данных.Возвращаемое значение — обновленные данные.
const fn = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
Там, где нам нужно использовать данные, мы можем получить данные через getState и прослушивать изменения в данных через подписку на подписку, потому что Redux — это модель публикации-подписки, и только прослушивание получит ее.
store.subscribe(() => {
const state = store.getState();
}))
Когда вам нужно больше данных, вам нужно использовать отправку с действием для распространения. Мы согласны с тем, что действие должно быть объектом с атрибутом типа, а тип представляет тип, с которым нужно работать.Если мы передаем параметры, мы обычно помещаем параметры в атрибут полезной нагрузки.
const action = {
type: 'INCREMENT',
payload: '参数',
};
store.dispatch(action);
Таким образом, когда мы вызываем store.dispatch, Redux передаст действие редюсеру, а редуктор вернет новое состояние посредством собственной логической обработки, а затем Redux запишет новое состояние и отправит сообщение компонентам, которые подписаться на него. То есть будет запущена функция, переданная в subscribe. В функции новое значение состояния можно получить с помощью store.getState() для завершения обновления страницы.
Предположим, у нас на странице есть кнопка-кнопка и элемент div.Этот элемент используется для отображения числа.Первоначальное значение равно 0. Когда мы нажимаем кнопку-кнопку, число, отображаемое в div, увеличивается.
<div id="count"></div>
<button id="button">按钮</button>
Код js следующий, мы сначала определяем редьюсер, в котором судим, что если тип INCREMENT, пусть state+1, а затем создаем хранилище через createStore и передаем его в функцию обработки редьюсера.
Затем подпишитесь на состояние, чтобы получить содержимое элемента div страницы, чтобы обновить значение состояния при изменении состояния.
Когда кнопка, наконец, нажата, мы отправляем действие через dispatch.
var reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1
default:
return state
}
}
var store = createStore(reducer);
store.subscribe(() => {
document.querySelector('#count').innerHTML = store.getState();
});
document.querySelector('#button').addEventListener('click', function () {
store.dispatch({type: 'INCREMENT'});
});
Это базовый процесс использования Redux, понимаете?
Итак, когда именно вам нужно использовать Redux?
-
Когда компонентам необходимо обмениваться данными или обмениваться состоянием;
-
Когда к компоненту нужно получить доступ в любое время и в любом месте.
-
Когда компоненту необходимо изменить состояние другого компонента.
-
Веб-сайт поддерживает переключение между языками и вход в систему для обмена данными.
Рекомендуется использовать избыточность для удовлетворения одной или нескольких из вышеперечисленных ситуаций.Если вы все еще думаете, использовать ли избыточность в своем проекте, я не советую. Технологии должны служить бизнесу. Чтобы избежать перегруженности дизайна, рекомендуется вводить новые концепции только тогда, когда это необходимо, и никогда не использовать их ради использования.