0: 2 минуты подождём и начнём.

1: Так, ну я думаю, можем начать.

2: У нас сегодня урок, посвящённый состоянию.

3: Рабочий стол.

4: У нас есть презентация.

5: Про состояние.

6: Как объяснить, что такое состояние?

7: У нас.

8: Если мы заходим на сайт министор наш

9: У нас есть.

10: Фильтр. Когда мы вводим данные сюда, то по ним происходит фильтрация. Текст сюда вводим, происходит фильтрация списка приложений.

11: В реакте все работает через штуку, которая называется состояние.

12: Я вам покажу, как это программируется.

13: Давайте для начала возьмём код, который мы на прошлом занятии написали.

14: Напоминаю, что я пользуюсь.

15: Brain здесь у нас есть в углу.

16: Переключалка вид для Гита.

17: А у нас есть?

18: Как это работает? Вы должны, ну, допустим, у вас уже открыт проект, вы должны подкачать информацию о том, какие есть ветки в проекте. Вот обычно это делается коман.

19: Или нажатием на стрелочку.

20: Нажимаем, подкачиваются ветки и мы понимаем, что у нас есть веточка воркшоп 3. Изначально она только среди удалённых. Я просто в прошлый раз её уже забрал, поэтому код скопировался и она появилась вот здесь.

21: Ну, допустим, её здесь нету. Вот выбираем нужную ветку, нажимаем просто чекаут или через командную строку пишем гид чекаут.

22: И таким образом переключаемся в ту ветку.

23: Которую создал Андрей в прошлый раз. Че есть в этой ветке?

24: Смотрим, у нас есть с прошлого раза.

25: У нас есть список карточек.

26: Который и список, который рождается вот из этого объекта поп.

27: И мы посмотрим, что там есть там есть список таких вот json, атлас, линза, гавань, привычек и так далее.

28: Мы сейчас с вами попытаемся сделать фильтр, который эти карточки будет фильтровать. Ну прям на клиенте. Че для этого нужно?

29: Так, давайте чат открою.

30: У вас все в порядке?

31: Слышно, видно.

32: Да, хорошо.

33: Так это программируется.

34: На прядке.

35: Есть такая штука, которая называется us state.

36: Смотрите, я напоминаю, что у нас вот эта вот функция апп.

37: Я скрою, это больше не нужно.

38: И поскольку эта функция у неё есть тело, функции, заголовок и тело функции, оно на самом деле как бы вот здесь это уже идёт return возвращается у нас g six, то есть разметка и вот здесь мы, в принципе,

39: Можем писать любой джаваскрипт код, мы могли бы здесь написать переменную.

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

41: И в этот диф, положим, импут.

42: Почему инпут? Потому что input это та самая штука, которая позволяет просто вводить текст. У инпута есть свойство тайп.

43: Потому что в htm вы, наверное, знаете, что очень много объектов интерфейса создаётся тегом input просто с указанием разного типа. И вот инпут текст.

44: Это и есть обычный input.

45: Сейчас я это запущу.

46: Открываем только json.

47: Запускаем дэш.

48: Он открывается и мы видим инпут, который немножко унесло в сторону. Ну это некрасиво. Снова засунем покрасивее чуть чуть. Че у нас здесь есть, у нас здесь есть

49: Вот у нас здесь есть main и вот этот диф, и мы хотим, чтобы дифф стал такой же, как main у на есть свойство.

50: Вот это вот Макс вид и margin auto. Напоминаю, что видите здесь марджин авто 0 авто. Это что означает, что сверху снизу 0 слева, справа авто можно писать?

51: Margin, left auto margin, right auto, или вот такие более короткие записи?

52: Если просто margin auto значит авто со всех 4 сторон, а когда 2 значения 1 сверху снизу, 2 слева справа авто работает так, что элемент позиционируется посерединке с учётом того, что у неё ширина.

53: Определённая, он старается становится вот такой ширины и по бокам у него такие оранжевые уши появляются. Давайте сделаем тоже самое.

54: Опять удалю? А то я вам сейчас буду показывать. Оно рендерится, оно из за этого 2 раза рендерится.

55: У нас здесь есть какой-то стиль, каталог называется. Давайте посмотрим, че там внутри у него.

56: Ну, вроде это он и есть.

57: Поэтому сделаем вот так.

58: У нас это будет фильтр.

59: Я плохо скопировал.

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

61: И сейчас мы создадим копию небольшую

62: Назовём её фильтр класс такой.

63: Сделаем тоже самое, только будет.

64: Чтобы 30 пикселей.

65: Вот здесь небольшая дырка появилась сверху, снизу нормально сойдёт. Теперь мы сюда пишем какой-то текст, например.

66: Atlas заметок.

67: И по хорошему нам надо его как-то донести в наш код, чтобы мы там могли сделать фильтрацию по объекту с данными и сказать, вот верни только те,

68: Который содержит слово атлас заметок. Как нам это сделать?

69: Чтобы, в принципе, достать код из

70: Импута, ну или вообще вот вводимый любой код пишут. Так, у всех элементов есть возможность подписаться на событие. То есть вот когда вы совершаете какое-то действие,

71: Интерфейсом, по сути, в него курсором мыши просто тыкаете, да? Ну, иногда, может пальцем. Если у вас экран сенсорный, то вы совершаете событие или по-английски event.

72: Они бывают разные. Ну, например, самые банальные. Это клик у чекбокса есть, например, событие change. Есть, например, событие ховер, когда вот вы мышкой навели ховер, а бывает событие, что вы как бы там

73: Нависли сверху. По моему, даже такие есть события, там ввода текста, нажатие на кнопку. Обычно это как делается, конечно, в голове человек не держит. Обычно разработчик все это в тот момент, когда вы Зада,

74: Все вопросом, а как обработать нажатие на 1 кнопку? Например, вы хотите разрешать только нажатие на кнопку enter, например, да, вы такие, как это сделать? Ну, лезете в интернет, спрашиваете нейросети и узнаете, что вот подписаться на кнопку и

75: Реагировать на 1 энтер надо там определённым образом. Вот, и как бы каждый раз это гуглить, как бы это нормальный сценарий разработки, в этом ничего плохого нет, никто заранее это не знает, в голове не держит. Обычно в голове держатся какие-то действия, которые вы совершаете.

76: Каждый день. Вот.

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

78: Подписаться на ввод данных в инпут тоже событие довольно такое тривиальное, поэтому это можно запоминать. Этим будете пользоваться. Вот есть событие, он тут сверху сразу подсказывает, он инпут.

79: Означает, при вводе его выбираем. Работает следующим образом. Это атрибут, которому в качестве значения нужно поставить функцию, которая вызовется тогда, когда

80: Сработает событие.

81: Мы эту функцию можем, должны написать сами, её заранее за нас никто не напишет, назовём её.

82: Input handler, например.

83: Слово хендлер значит обработчик.

84: Инпута, нам надо её создать, потому что я пока слово написал, которое в природе не существует, поэтому давайте её создадим. Это у нас будет переменная, равная функция.

85: У неё есть тельце, которое должно вывести текст, который мы вводим.

86: Le текст вопрос, где взять этот текст? Ой.

87: Объясняю, когда.

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

89: Вызывай, когда будет input, он её вызовет и туда закинет объект, в котором будет содержаться вся полезная информация. Обычно этот объект называют либо её, либо эвент. Давайте его назовём эвент, потому что

90: Как бы это данные по событию её для краткости.

91: Как работают любые функции, когда вы в аргументе функции пишите какое-то слово, то оно может быть любым. То есть я могу здесь написать слово, например, не знаю.

92: Red, ну, бессмысленное в данном контексте, но оно все равно будет содержать то, что туда закинет вызывающий

93: Поэтому, ну, поскольку мы знаем, что туда все-таки будет event заброшен, ну, давайте сразу ивент назовём, чтобы не путать читателя и себя заодно.

94: И давайте я вам сейчас покажу, что там внутри, как вообще понять, как же-таки из этого достать текст, потому что он не текст сюда закидывает, он закидывает сюда целый огромный объект.

95: Идём сюда.

96: Он, наверное, уже рефрешнулся сейчас консольку откроем, пишем.

97: Оба. А ничего не произошло. Идём сюда.

98: Ищем наш код. Как найти наш код. Кстати, давайте я вам покажу. Открываем девтулз.

99: Наш файл называется апп джейс икс.

100: Идём, открываем. Девтулс, допустим, on нас закрыт, мы, можно тут искать, но тут, видите, тут иногда много написано и фиг поймёшь вообще, че там происходит. Нажимаем здесь, кстати, подсказка, по моему, есть. Да, вот контрол п.

101: Или команд п. На винде ctrl p. О линуксе не знаю вот почитайте подсказку, пишем апп джи с икс выбираем, он тут говорит видите, из папки срц ну, это точно наш, смотрим код наш.

102: Ну, значит, и файл правильный ставим брекпоинт, нажимаем просто сюда на стрелочку. И теперь, когда мы введём

103: Значение. Ну, сейчас 2 нажму, да, оба. Код останавливается в этом месте. Ну, таким образом, можно прям на ходу дебажить. Че вы сделали и смотрим навои.

104: И видим, что тут очень много всего.

105: Знать, что все это значит, как правило, не надо. Опять же, механизм, как в предыдущий раз вам иногда становится нужно что-то такое эдакое. Вы такие, а как

106: Это сделать, а вам интернет отвечает, вот в ивенте найдёте там поле, и в нём будет то, что вам надо. Вы такие, ага. И идёте искать конкретно. Сейчас я знаю, что нам надо, потому что это надо постоянно. И вот этот путь мы запоминаем, в ивенте есть

107: Поле карн таргет и target вот сейчас они между собой равны, но раз уж их 2, то есть сценарий, когда они между собой не равны, это вы там потом узнаете, пока нам в принципе, пофигу, вот мы выбираем.

108: Картаргет. И здесь есть value, и там есть атлас заметок 12.

109: Карен, таргет это то, во что мы ткнули.

110: Перед тем, как остановились, вот. И там, как правило, есть либо велью, либо сейчас мы ещё на чекбоксе посмотрим. Другой вариант. Ну, велью это наиболее часто. Вот обычно, как просто глазками ищете. Тут, на самом деле их дофига очень

111: Много, если не можете найти, опять же читайте как поле называется в интернете вам google очень легко и подскажет или Алиса диксик.

112: Но нам нужно велью, поэтому пишем здесь. Нет, здесь не пишем, пишем здесь, здесь, вот здесь.

113: Лет текст равно.

114: Event

115: Карен таргет вэлью.

116: После этого проверяем.

117: Сейчас обновимся. Вот код наш появился, снова ставим брекпоинт.

118: Вводим букву.

119: А я букву ф ввёл, смотрим. Ну тут он подсказывает, в тексте появилась буква ф. Все нормально, сейчас консоль выведется.

120: Смотрим консоль, да, буква ф есть.

121: Все на месте работает. То есть мы свой код получили. Текст, который мы сюда вводим уже хорошо.

122: Так делается всегда. Вот этот способ. Можете запоминать ивент Карен таргет велью. Вы получаете текст, который достаёте из обработчика события.

123: Если события.

124: Не ввод текста, а, например, клик. Вот вы, я же могу кликнуть, я могу, где это было то здесь я могу сюда ввести текст, а потом кликнуть вот в момент

125: Клика. Я все равно попадаю в данные этого инпута, и там в value тоже будет текст.

126: Улавливаете, как это работает?

127: Как у вас дела?

128: Все понятно.

129: Все понятно. До.

130: Теперь что надо сделать? Теперь нам надо.

131: Как-то вот этот аппс отфильтровать по введённому тексту.

132: Как это можно сделать?

133: Давайте пока вот здесь напишу.

134: Чтобы это сделать.

135: У нас аппс это массив, по моему, вот мы идём, проверяем, проваливаемся вот сюда, в apps, я с контролом проваливаюсь, нажали, видим, да. Вот Андрюха создал массив объект.

136: А раз это массив, а мы пишем на джаваскрипте, то можем написать точку и здесь будет.

137: Список функций по работе с массивом джейс так работает. У объекта есть функции по работе с этим объектом. Массив это как бы частный случай объекта у него

138: Тоже есть свои функции. Их там штук 20. Обычно их более менее все помнят, потому что более менее не все пользуются. Я думаю, вы со временем тоже запомните.

139: Достаточно просто открыть справочник, посмотреть на них, почитать про них и там с какого-то раза оно в голове уложится. Я вот знаю, что есть функция фильтр.

140: Она используется для того, чтобы из этого массива выкинуть то, что нам не нужно, как работает практически любая функция, встроенная в объект или в массив, ну или куда-либо ещё она принимает.

141: Вы как бы вот вызываете, и она че то просит, она просит в себя функцию обработчик.

142: То есть нам надо написать сюда функцию

143: Которая?

144: Будет фильтровать, как она фильтрует, она фильтрует, она проверяет каждый элемент массива и говорит, удовлетворяет оно фильтру или не удовлетворяет.

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

146: Ссылку на сам массив, нам сам массив не нужен поэтому мы возьмём только сам этот элемент, назовём её сразу апп потому что ну как бы это ups a1 штука это апп, вот тут можно ещё 2 взять аргумент это

147: Будет индекс, но он нам на самом деле нам не нужен. Так просто поставим на всякий случай. И теперь нам нужно вернуть.

148: В том случае, если

149: У нас условия совпадают.

150: Мы можем в принципе так всегда пишется какое там поле кстати поле называется. Открываем ппс, оно называется hard тайтл. Давайте вот по нему будем искать a title.

151: Проверять, а не искать. Если поле карт тайтл. Видите, он тут уже соображает даже самое. Сама ёшка понимает, что это элемент массива и что там есть поле карт тайтл. Он тут не пытается мне сказать, что я такого не знаю.

152: И вот если оно равно нашему введённому тексту, то нормально.

153: Earth.

154: Такс.

155: Pre равно.

156: Так, теперь нам это как-то.

157: Ну давайте пока вот сюда эту функцию встроим.

158: Сюда и перенесём.

159: Для демонстрации фильтр как работает, он не текущий фильтрует, а он как бы выдаёт из себя отфильтрованный, поэтому нам надо написать

160: Какую-то переменную назовём её фильтр это типа отфильтрованный апс.

161: Cat фильтр ups.

162: И ну и вот здесь, на броне сейчас остановимся, посмотрим, че будет.

163: Идём сюда, давайте возьмём я, поскольку написал three равно это в случае, если текст полностью совпадает.

164: Такой элемент мы заберём из массива, поэтому я сейчас скопирую целиком название атлас заметок.

165: Открываем здесь наш код.

166: Ставим брекпоинт.

167: Вставляем текст, он сразу срабатывает, потому что он инпут. Это именно на момент ввода.

168: Потому что есть ещё событие, например, on change, это на момент изменения значения, и оно наступает тогда, когда вы, курсорчик уводите, вот вы текст закончили вбивать, курсор, увели из импута, и в этот момент срабатывает событие on change.

169: Это поздновато. А input это как бы в момент появления значения в инпуте. Вот, поэтому он так быстренько кажется, что работает. Это удобно. Смотрим, че произошло.

170: Переменной. Ну че ты не показываешь?

171: Че то он завис. Давай-ка ещё раз.

172: Ну что такое?

173: Вот в переменные фильтр ups у нас попал массив, всего лишь состоящий из 1 объекта и полем атлас заметок, естественно он весь сюда попал.

174: А вапс их много.

175: Давайте я вам сразу расскажу более короткую форму записи.

176: Как это работает, примерно понятно. Вот так мы отфильтровали. Теперь нам надо ещё будет их в интерфейс засунуть и все-таки использовать состояние, потому что пока что это я без состояния сделал, так обычно не пишет код, я вам просто показываю механизм фильтрации, механизм доноса, те,

177: До этой самой фильтрации. Теперь нам это тоже самое надо будет просто более аккуратно записать и более. Ну правильно, как это автор реакта придумали.

178: Значит, че для этого надо сделать?

179: Я сейчас забыл, че то я вам сказал.

180: Вас не дождёшься, реакция.

181: Давайте.

182: Угу.

183: Вот этот текст, он нам не нужен. Нет, сейчас, подождите, наверное, нужен. Давайте через состояние. А вот стрелочная функция я вам хотел написать, вспомнил это, пока закомментируем.

184: Есть более короткая форма записи, чтобы не писать вот так смотрите, мы когда пишем функцию

185: Сейчас я вам эквивалентную форму записи напишу, и поймёте, в чем разница.

186: Слово function стираем.

187: Но нам надо сказать, что все-таки эта функция заменяем на стрелочку.

188: И вот это чуть более другая форма записи, что мы сделали? Видите, у нас здесь есть аргументы и тельце у функции. Вот она фигурная скобка, оно остаётся

189: Аргумент остаётся мы слово function превращаем в стрелочку.

190: Может, сначала показаться, наверное, сложно воспринимаемо, но к этому довольно быстро привыкаешь и становится.

191: Приятно так писать. Теперь есть ещё более короткая форма записи, поскольку мы не используем аргумент. И на самом деле он нам сейчас не особо нужен. Мы только апп используем, мы можем не писать круглые скобки.

192: Их пишут, когда больше 1 аргумента, потому что, ну, нам надо как-то показать, что это аргументы, функции, а не просто набор слов случайных.

193: Можно написать вот так. Но у нас тело функции состоит из 1 строки.

194: И мы можем написать вот так мы можем грохнуть. И вот это тоже.

195: И будет вот так.

196: Это такая приятная форма записи, которая хорошо читается, если, ну, букв экономится много, а смысл не теряется.

197: Мы что мы говорим, что вот апп передаём, возвращаем равный тексту.

198: То есть, если вы видите вот такую форму записи, то это значит вот это то, что будет возвращено из функции.

199: Ну то есть это вот то, что было после слова return. Если у вас больше 1 строки так не получается писать, надо уже писать фигурные скобочки и, по сути, писать тоже самое, что вот здесь, как только появляются фигурные скобки, обязательно надо написать слово return.

200: Потому что если вы в java скрипте слово return, не напишите, это тоже самое, что написать вот так он на самом деле будет, и он будет в конце, и он вернёт ничего, то есть undefined?

201: Поэтому давайте вот это я сейчас закомментирую.

202: Этна.

203: Сделки.

204: Вот так не особо надо сейчас.

205: Теперь давайте все-таки используем состояние, как использовать состояние для состояния. Придумана функция use state.

206: Что такое состояние?

207: Она входит в пакет реакта, поэтому, когда вы пишите y state, надо её импортировать именно из реакта бывают иногда приколы, что ю. Стейт импортируется не из реакта откуда-то там, ещё из какой-то библиотеки, которая у вас есть в проекте.

208: Странное поведение. Ну это просто невнимательность пишется вот так.

209: Что это значит?

210: Отформатируем.

211: Что все это значит?

212: Поясняю. Эта функция, видите, у неё круглые скобки есть, она из себя возвращает.

213: То, что мы вот таким образом объявляем, как работает вот это объявление.

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

215: Практика это вы и себе, и следующим читателям подсказываете примерно, что здесь будет, то есть строка здесь будет.

216: Как работает? Как вот эту фигню понимать?

217: Смотрите, есть, например, массив.

218: Со значениями, а?

219: И b.

220: Мы хотим создать переменные а и б с этими значениями нам надо написать что-то типа вот такого лет, а равно a 0.

221: Лет б равно a1.

222: Массив значение по индексу 0 кладём сюда по индексу 1 кладём в б.

223: Так, довольно многословно и есть форма записи, которая называется деструктуризация. Мы можем написать вот так.

224: Это означает ли распаковка ещё слово говоря в питоне? По моему, это распаковка называется.

225: Мы как бы массив превращаем в массив и то, что лежит в его позициях, кладём вот в эти переменные и объявляем их с помощью лет, если мы сделаем вот так.

226: То так тоже можно единственное, что переменная ц будет значение define содержать, потому что здесь просто для неё ничего нет.

227: Давайте я сейчас запущу это, чтобы проверить, как работает.

228: Вот брейкпоинт здесь поставлю.

229: Что мы видим, что у нас, а вот он, а содержит а. Б содержит б ц, содержит андефайнд.

230: При этом war 2 значения.

231: Что будет, если мы наоборот?

232: Сделаем вот так.

233: То есть мы в 1 переменную запишем.

234: Что-то давайте посмотрим что будет.

235: Что получилось в переменную, а попал, попало значение. А я надеюсь, что вас не смущает, что а равно, а потому что это все-таки строка, это вот это вот, r, переменная, а это, ну, переменная, которая через лет такая же, как a только

236: И там лежит строка.

237: Б просто не используется и все.

238: Вот эта запись, что означает, что ю. Стейт возвращает внутри себя массив с 2 штуками. 1 это переменная, в которой лежит это самое значение, которое мы хотим создать.

239: Текст это функция, которая призвана новое значение записать вместо старого значения в переменную текст.

240: Зачем, почему не написать просто text равно вопрос наверное такой. Возникает ответ, потому что

241: Это react, и нам надо периодически вызывать ререндер изображения.

242: Поскольку это функция ререндер означает надо заново вызвать функцию.

243: То есть у нас есть функция апп, и когда мы стартуем, вот у нас есть этот main, тут есть create, там рут рендер апп, вот в этот момент вызывается функция апп 1 раз.

244: А когда мы понажимали на клавиши?

245: То у нас браузер, конечно же, нарисовал, что мы сюда тексты ввели вот сюда.

246: Но react.

247: Не ожил от этого он совершил тот единственный цикл на старте и замер. И больше функция апп не вызывается. То есть вот этот код вот так сверху вниз не выполняется.

248: Надо, чтобы выполнялся, поэтому есть функция.

249: Вот это сет, ну, как бы мы её называем сет текст, потому что мы хотим изменять переменную текст. Если б у нас была там переменная list, это было бы правильно назвать сет лист, естественно, мы можем назвать как угодно, можем слово сет вообще не писать.

250: Ну, это просто традиция. Как сделать так, чтобы другие люди поняли, че ты написал.

251: Поэтому.

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

253: И надо делать так. На самом деле надо сделать вот.

254: Текст. Текст

255: Это пока давайте не будем писать.

256: Сейчас мы увидим интересное, что же будет. Давайте я тоже тоже сотру. Что мешало изображение.

257: Пока подсветил, что мы текст не используем, мы только txt используем.

258: Давайте мы её тоже заюзаем. Мы сейчас вот здесь, вот внизу сделаем ещё 1 лифчик.

259: И сюда выведем.

260: Как-нибудь вот так.

261: Чтоб это было достаточно красиво. Сделаем ещё вот так.

262: То есть через фигурные скобки я вывожу переменную. Вот это просто текст обычный.

263: Идём сюда. Смотрим. Появился т.

264: В момент ввода.

265: Происходит следующее.

266: Видели, да?

267: Подключи.

268: Включить то?

269: Сложно.

270: Но если мы поставим брекпоинт?

271: Вот здесь.

272: Видите, он лет текст равно давайте, чтобы вас не путать. Назовём вот так.

273: Это у нас будет введённый текст.

274: И мы его засовываем.

275: Это вот так засовываем вот в этот сет текст, который должен обновить текст. И вот здесь будет консоль лог.

276: И вот здесь будет вывод ещё дополнительно.

277: Начинаем заново.

278: Ввели букву. Ой, не поставил, ввели букву. Оба смотрим. Здесь 1 буква е.

279: А здесь 2.

280: И мы понимаем, что вызов сет текста пока ещё не обновил переменную текст.

281: То есть буквы 2, но она ещё как бы не доехала до переменной текст. И вот в этот момент на экране тоже выводится 1 е.

282: Ставим брекпоинт сюда.

283: Нажимаем синюю стрелку, то есть это типа продолжить выполнение Хоба.

284: И он остановился на турне, и что мы видим, что текст стал содержать её.

285: Почему так происходит? Потому что

286: После того, как мы вызвали сет текст, код дойдёт до конца текущего выполнения, то есть, по сути, до конца вот этой функции. И только после этого сработает ререндер, то есть пойдёт новый цикл.

287: Жизни реактор так называемый жизненный цикл.

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

289: И это именно перерисовывается реакт, потому что когда вот мы до этого в input вводили, там реакт не участвовал, это просто браузер рисует, что он позволяет вам буквы вводить, но это эти буквы, они как бы не попадают в жизненный цикл.

290: Приложение, а через state мы вводимые данные как бы заносим в механику реакта.

291: И надо так всегда писать.

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

293: Покажу просто правильный вариант.

294: Так, насколько все понятно, давайте сигнал подайте.

295: Я скролл бар, ёлки палки, уже плюсов понаставили.

296: Отлично.

297: Теперь нам же надо отфильтровать список, как это сделать. Нам вот эту функцию надо реанимировать.

298: Правильный способ, какой кроме стейта есть ещё 2 волшебное слово, называется use эффект.

299: На самом деле их чуть больше, но в огромном количестве случаев используются только эти 2.

300: Оно тоже из реакта, поэтому я вот здесь его импортировал из реакта. Че он нам предлагает?

301: Давайте попробуем сократить запись.

302: Вот без переноса пока.

303: У эффект это тоже функция, потому что, видите, она вызывается вот этими скобками, в неё передаётся 2 аргумента. 1 аргумент, функция, обработчик.

304: Вот такая форма записи это стрелочная функция, которая ничего не делает, она ничё не принимает, и тельце у неё пустое.

305: И massive пока тоже пустой, как работает, работает следующим образом.

306: В момент вызова он регистрирует вот эту штуку и вот эту во 2 аргумент в массив пишем то на изменение чего надо реагировать. А вот в эту функцию пишем, что делать.

307: Когда это изменилось?

308: Если, ну, функция пустая, значит он ничего не делает. А вот если массив пустой, это означает, что на старте 1 раз-таки все-таки с работой, а поскольку зависимости нету, то никаких здесь слов, то и

309: Больше не на чего, поэтому юз эффект срабатывает 1 раз обязательно, а следующие разы срабатывает. Если сюда что-то написать, поступим следующим образом. Мы сюда напишем переменную текст тем самым.

310: Мы скажем, пожалуйста, отслеживай изменения переменной. Текст, который будет меняться с помощью сет текста. То есть каждый раз, когда мы туда вводим букву, будет вызываться вот эта штука.

311: Напишем здесь.

312: Консоль лок текст.

313: Будем выводить.

314: Вот эту переменную стейта каждый раз, когда она меняется. Соответственно, вот здесь мы её выводить не будем.

315: Это импут н а в uz эффекте будем идём на сайт, смотрим рефреш его.

316: У нас есть наш код консолька.

317: И пишем д. Написали, вывелось д. Написали вывелось, но только не 2 д вывелась а. Д. Д. Потому что это текущее состояние, текущее состояние состояния.

318: Вот поставим брекпоинт, сюда нажимаем.

319: Сейчас интересно будет ещё раз. Д Хоба сначала вызвался.

320: Return.

321: И в этот момент тут уже 3 д.

322: А потом вызвался юз эффект.

323: Ну, тут, конечно, тоже 3 д.

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

325: В каком порядке у вас что-то делается? А в джаваскрипте такое иногда случается, потому что он работает асинхронно, то есть порядок иногда нарушается.

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

327: Что у нас не очень много свободных переменных, у нас пока знание о том, что youth эффект наступает после того, как произойдёт вот этот return, а этот ретурн произойдёт после того, как выполнится код до ретурна.

328: Вот, не вот этот, который внутри функции, а код до, то есть если вот здесь какие-то слова написаны, вот в 18 бы строке был 17 или вот здесь 32 33, вот этот бы код он выполнялся.

329: И только после выполнения этого кода наступает выполнение вот этого кода.

330: Я надеюсь, это тоже понятно, потому что это вроде очень не сложно.

331: И теперь нам надо-таки отфильтровать приложения, и чтобы их хорошо нарисовать, мы для них тоже создадим.

332: Переменная.

333: Туда засунем, собственно, вот эту штуку. Давайте мы её сейчас переименуем немножко пускай это будет переменная называться дата.

334: Да, да.

335: И вот здесь, соответственно, она будет называться дата, типа данные просто

336: Мы их используем для того, чтобы

337: Сделать список.

338: В его первоначальном виде.

339: И затем, когда у нас

340: Там, внизу мы опять используем аппс, если вы помните, вот здесь

341: Я закрою, поэтому этот код мы не меняем. Мы дату переименовали, но зато потом опять в п все положили.

342: Вот здесь нам надо вызвать сет апс.

343: По сути, вот эту штуку сделал.

344: Заменим.

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

346: Проверим, как это работает. Идём сюда. Так, че то я сломал.

347: Так че сломал?

348: Ну, тут вроде ничего.

349: Неправильно, ппс.

350: Все на месте.

351: Сейчас пока вроде нормально.

352: В прошлый раз я какой-то другой код написал, он работал. Сейчас он не работает. Че происходит? Смотрите.

353: Вот этот код срабатывает сразу на старте.

354: И поэтому происходит следующее он сразу фильтрует по тексту, который равен пустой строке, ничего не находит, и он быстренько нарисовал весь список, следующий кадр, и он его полностью перерисовал в пустой список.

355: Поэтому так делать не надо, надо как-то по другому сейчас сообразим. Нам надо фильтровать в тот момент, когда

356: У нас происходит ввод.

357: Даже не знаю, как бы это сделать.

358: Мы все разбежались.

359: А как я это в прошлый раз делал, интересно, вчера?

360: Show history.

361: А сестре?

362: Вот local history.

363: Так, так, так, так.

364: А вот роллбэк.

365: У нас был апс.

366: У нас был.

367: Ладно.

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

369: Ао немножко глуповат.

370: Раз у нас есть наши приложеньки, да, мы начинаем фильтровать.

371: У нас фильтруется по значению атлас, и они все пропадают.

372: Если мы с ошибкой, у нас нет сущности с названием атласа замето, поэтому пустой список.

373: Если мы ничего не вводим.

374: Тут тоже пустой список.

375: Потому что у нас нет ничего, что было бы равно с названием пустой список.

376: Ваша задача будет сделать так, чтобы это работало хорошо. Если будут, будет не получаться, пишите в чат.

377: Я вам подскажу, как это сделать более правильно.

378: Но механика такая, что вы её осознаете и сможете, я думаю, сделать, чтобы работало.

379: Ага.

380: Храним данные в состоянии, меняем данные через

381: Реагируем на изменение данных через uz эффект.

382: Давайте я вам сейчас покажу ещё пример с чекбоксом, потому что с чекбоксом поведение чуть чуть отличается.

383: Все, пока не нужно. Давайте сделаем ещё здесь. Вот чекбокс.

384: Назовём его чек.

385: Тёк хендлер, у него будет тип.

386: Чекбокс.

387: Естественно, нам нужно создать функцию чек хендлер.

388: Который будет

389: Получать значение. Есть Галка или нет и сохранять какой-то фильтр. Давайте сделаем.

390: Оценим бесплатность.

391: То есть, если у нас приложение бесплатное.

392: Оно будет иметь поле true.

393: А если оно за деньги, то оно будет false.

394: У него ещё, естественно, может быть какое-то значение цены.

395: Как будет велью?

396: 3 ₽, 2 ₽.

397: Найдём те, которые бесплатные с помощью чекбокса.

398: Возвращаемся, нам надо значение чекбокса где-то сохранить, поэтому создаём ещё 1 состояние.

399: Будет у меня пускай.

400: Название фри сет фри по умолчанию false.

401: Давайте попытаемся вывести.

402: Берр, эти галочки.

403: Сюда выводим состояние.

404: Этого фри.

405: Vendere, естественно, меняем это цвет фри. Делаем

406: Переносим туда-то, что мы прочитаем из ивента.

407: И попытаемся проверить, как это работает.

408: Успели, да, понять. Вот я создал хендлер, у него точно также у чекбокса, у любого вообще все, что у него есть, оно, когда в него тыкаешь чем-нибудь, оно тебе кидает, ивент. Мы его здесь берём, лезем, смотрим, че у него там, в каран таргете.

409: Надеемся, что там что-то есть кладём в переменную переменную, засовываем в set free, в обновлятель состояния переменной фри, которую мы объявили чуть чуть выше, вот здесь, точно так же, как и до этого. Единственное, что

410: Начальное значение у него фелс, ну, типа оно уже отрендерено вот в таком состоянии. Значит, фелс, когда нажато, то тру будет.

411: И смотрим, нажали, отжали, нажали, отжали, нажали, отжали. А реагирует он явно плохо, просто пишет, он все время of не пишет. Идём сюда смо.

412: Вот наша функция чек хендлер, ставим бряку.

413: Нажали велью, он, ну, допустим,

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

415: И вот тот случай, когда не велью, а чекет, просто поле называется по другому у чекбокса.

416: Идём.

417: Когда вы пытаетесь найти поле и понимаете, что вам идёт в руки что-то не то, либо просто глазками ищите, там в этом списке что-то подходящее по смыслу. Как правило, это обычно не сложно догадаться. Ну либо справочники, смотрите, либо у неё

418: Сети спрашиваете, а как правильно там?

419: Поэтому вместо велью возьмём чекет.

420: Кстати, переменную чекет я уже назвал. Чекет. Значит, эту, положим, сюда, эту. Положим сюда в Надежде, что сейчас фри наш поменяется фри выводим пока что в jazz. Икс, идём сюда.

421: Смотрим.

422: Чекет тру нормально пускаем галку, снимаем оба. Чекет фелс работает.

423: Опускаем, смотрим сюда чек.

424: *** не выводит, но мы можем поставить breakpoint прям сюда.

425: Вот так Хоба нажали.

426: Тру тру есть.

427: Pals тоже есть.

428: Просто невидимое почему это происходит, когда вы что-то пытаетесь засунуть вот в фигурные скобки в g6 разметки, то по хорошему это что-то должно быть текстом.

429: Такие вещи, как массив, выведутся потому что у него есть встроенный превращатор в текст.

430: А вот у булевского значения превращатор в текст такого, чтобы он выявился в джессике, нет, если попытаетесь засунуть объект, он, по моему, вообще заругается, скажет, выдаст ошибку и скажет так нельзя.

431: Выводи, пожалуйста, строку. Ну можно вводить нал нал будет просто пустотой. Андефайнд тоже не, кстати, с дефайном подстава, потому что undefined, по моему, вводится в виде слова undefined, поэтому с этим тоже надо быть аккуратным.

432: А может, и нет, проверьте сами, это просто интересный эксперимент.

433: Теперь нам надо бы вывести слово какое-нибудь вместо true false и для этого используется.

434: Коронарный оператор. У нас есть ещё немножко времени, я вам сейчас расскажу, потому что в предыдущей группе я успел рассказать.

435: Что такое тернарный оператор? Пишется он вот так.

436: Блин.

437: Это ладно.

438: Операторы бывают бинарные, унарные, точнее, унарные, бинарные и тернарные. Это слово означает, что у оператора, например, и

439: Plus plus оператора здесь плюс, плюс у него 1 оперант, вы, наверное, в институте должны были проходить на всякий случай. Рассказываю.

440: Есть оператор плюс у него должно быть 2 + 2 у оператора + 2 оператора. 1 слева, другой справа.

441: А вот тернарный это когда операндов 3 и оператор здесь на самом деле вот такой.

442: Вот это не 2 оператора, это 1, просто у него 3 операнда. Вот этот, вот этот, и вот этот работает. Так. Его программисты обожают все время, везде пишут ужасно, когда тёрна.

443: Оператор написан внутри тернарного оператора, который написан внутри тернарного оператора. Прочитать это практически невозможно, потому что за этим же ещё, как правило, какая-то логика спрятана, а не просто разгадать ребус, если то вот работает

444: Образом. Если значение истина, тогда вот это если ложно, тогда вот это при этом сюда можно и функцию написать.

445: По сути, это просто по моему функцию можно не вру я вам интересно сейчас, ну попробуйте сами.

446: Вот у нас это пока работает просто вывод либо 1 строки, либо другой и в juice иксе вы не можете написать и false, потому что нельзя последующий раз расскажу более подробно почему, а вот тернарный.

447: Можно, поэтому если вам внутри jazz икса надо написать если то, то, по сути, это единственный способ это сделать.

448: Идём.

449: Платно, бесплатно, платно, бесплатно работает.

450: Понятно.

451: Как у вас дела?

452: Они это проходят. Надеюсь, я когда программистов иногда спрашиваю своих знакомых, они почему-то этого не знают. Любят очень интернетный оператор, когда их спрашиваешь, сколько интернатных операторов, ты знаешь, они такие.

453: Даже забывают только, что 1 знает. На самом деле он, по моему, всего 1 и во всех языках он, как правило, есть и не бывает. Кватернарные атора слово есть, а оператора нет. Это

454: 4 должно быть.

455: Так что можете прикалываться над кем-то из друзей айтишников.

456: Давайте теперь ещё че можно попытаться. У нас есть 10 минут, попробуем отфильтровать.

457: Ещё и по фри как бы это сделать?

458: Наверное, это надо сделать здесь.

459: Вернём обратно тело функции.

460: Напишем.

461: Напишем ретурн.

462: Если.

463: Как он там называется, прайс?

464: Немного колхозный способ фильтрации. Ну.

465: Типа мы ищем одновременно по совпадению названия и по совпадению поля прайс.

466: Давайте попробуем. Это работает.

467: Идём сюда.

468: Смотрим, поскольку у нас атлас заметок бесплатный.

469: Мы нажимаем сюда, и нифига не происходит. Почему?

470: Кто догадается?

471: Наша функция не сработала.

472: Есть версия.

473: Хоть 1 маленькая версия.

474: Да, конечно, можно.

475: Ничё себе. Ты там сколько всего сделал?

476: Класс.

477: Короче, у нас не работает, потому что

478: Мы забыли написать, что и на это состояние тоже надо реагировать, у нас же это massive, мы через запятую перечисляем все то, на что надо реагировать, поэтому он просто не вызывал вот эту функцию.

479: Тот момент, когда мы тыкали в галку.

480: Идём сюда.

481: Atlas заметок нажимаем и все равно не работает.

482: Это я ещё накосячил где-то.

483: Ру

484: Atlas заметок.

485: 0.

486: Правильно.

487: А он че то у меня вообще не вызывается.

488: Наверное.

489: В этом дело.

490: Да я накосячил то ещё вот в чем.

491: Я накосячил в том, что я фильтрую уже отфильтрованное, и когда его становится 0 дальше уже фильтровать бесполезно больше чем 0 не станет, надо фильтровать исходность.

492: Список данных.

493: Когда как.

494: Так.

495: И он появляется галку снимаем.

496: Пропадает. Надо отталкиваться от исходных данных. Вот. Поэтому мы каждый раз, когда тыкаем мышкой, мы фильтруем переменную дата. Это та, которая у нас

497: Лежит прям захардкоженая.

498: И вот её уже засовываем в переменную апс, отфильтрованную когда мы совершаем следующее действие, мы снова исходные данные фильтруем, получаем какой-то усечённый список и снова его засовываем в apps и снова.

499: Показываем. Вот тогда работает нормально.

500: Вот. Ну че, вопросы есть? Я вам вроде все рассказал, что и в предыдущей группе.

501: В презентации тут примерно все тоже самое сказано.

502: Вот прям разжёвано очень сильно. Тут ещё предлагался пример со счётчиком, но мне кажется, я бы вам просто это не успел все тогда рассказать.

503: Презентацию можете использовать как

504: Напоминалку, если лень смотреть полуторачасовое видео.

505: Повторно.

506: Ну че, тогда расходимся. Спасибо всем, что выслушали, будут вопросы, че то непонятно. Пишите в чат или как-то через преподавателей передавайте вопросы, мы будем стараться на все отвечать.

507: Всем пока.