Состояние и реквизиты:
Эти 2 делают React динамичным. Состояние, существующее внутри компонента, и Свойства, которые мы передаем между компонентами.
Создание начального состояния и использование компонента внутри класса:
Создайте файл Vendor.js с начальным состоянием, содержащим данные, связанные с поставщиками:
Затем вызов этого компонента поставщика внутри корня (App.js):
Как изменить состояние компонента?
В идеале, если мы придерживаемся стандарта Javascript, мы можем просто получить доступ к свойству, которое мы хотим изменить, а затем обновить:
this.state.vendorsData[0].name = «Ришаб»
Но это совершенно неправильный метод и не разрешенный React. Мы получим предупреждение в консоли типа "Не изменяйте состояние напрямую и используйте setState()".
Итак, React, чтобы определить, что что-то изменилось, нам нужно изменить состояние с помощью метода setState (предоставляется внутри компонента класса). setState – это асинхронный метод, поэтому изменения сразу же отражаются.
Теперь посмотрим на setState() в действии. Создайте функцию, которая изменит доступный баланс в соответствии с новым состоянием, и добавьте для этого кнопку щелчка.
До и после нажатия:
Теперь с мутациями состояния с помощью setState появляется одна из лучших вещей в React — Virtual DOM.
Виртуальный DOM достаточно умен, чтобы проверять, что добавляется/удаляется/изменяется, поэтому ему не нужно снова отображать полный DOM.
Как мы знаем, обновление DOM является наиболее сложной и трудоемкой задачей в пользовательском интерфейсе, но с React Virtual Dom это становится очень эффективным. React сравнивает начальное состояние и новое состояние, отображает измененные элементы, только не одинаковые. Это повышает производительность при работе с React. Таким образом, в приведенном выше примере он будет повторно отображать только оставшийся баланс вместо всех трех полей.
Подправлено состояние обновления некоторым динамическим способом (вычитая 10 при каждом клике):
Теперь есть один интересный случай. Мы взяли новое поле состояния pageNumber и изменили его с установленным состоянием 4 раза с другим значением:
Теперь, когда мы отображаем номер страницы по клику, что должно быть на выходе??
На самом деле то, что он делает внутри, это object.assign({}, {pageNumber: 5}, {pageNumber: 2}, {pageNumber: 3})
Это приводит к {pageNumber: 3}
Props: свойства/данные, передаваемые между различными компонентами. Это может содержать функции, объекты (+массив), строки, логические значения. (Мы видели в прошлом уроке — —)
Обработка событий в React:
Мы обсудим обработку событий двумя способами:
- Использование анонимной функции
- Использование привязки
Использование анонимной функции:вызов исходной функции путем создания анонимной функции.
Использование Bind: привязка исходной функции ( Bind возвращает новую функцию путем привязки переданных данных/объекта)
Двусторонняя привязка в React: (Модель к представлению и Представление к модели)
Здесь мы будем использовать свойство ввода html с типом текста. Мы будем вызывать функцию Onchange при обновлении значения, а внутри функции onChange мы получим доступ к значению (используя целевое значение события) и изменим состояние в соответствии с этим значением.
В случае каких-либо вопросов и предложений, пожалуйста, свяжитесь со мной https://www.linkedin.com/in/rishabh-jain-a5978583/ или напишите письмо @[email protected]
