Уроки React Js - State, состояние компонента и примеры
HTML-код
- Опубликовано: 29 сен 2024
- Мы продолжаем курс уроков по React js для начинающих и в этом видео мы рассмотрим состояние компонента. State отвечает за состояние компонента, его можно определять, можно в последствии и изменять с помощью метода setState, все это на примерах я покажу и на практике расскажу.
Курс «Python для веб-разработки» от SkillFactory: clc.to/tiIJTQ
Очень интересные уроки, а можно код в конце каждого урока выложить для просмотра?
Вместо прописываний кучи байндов можно методы создавать с помощью стрелочных функций и тогда им сразу автоматически this привяжется.
Хотел то же самое написать. Только у стрелок нету своего контекста и из за этого ссылается на уровнь выше
начал реакт вчера. посмотрел что надо байнд добавить и только шум
на 8:32 в this.setState в теле стрелочная функция должна возвращать объект {visibility: !state.visibility}, у меня вопрос, почему мы тут не написали !this.state.visibility? setState хранит в области видимости state и потому нам не надо явно прописывать this.state? Спасибо большое за видео!
А почему к методам класса надо обращаться через this? а не напрямую.. например increment ... я попробовал не работает.. но почему?
А привязку контекста нельзя как-то с помощью стрелочных функций разрулить без bind?
У меня такой же вопрос, если знаешь ответ подскажи))))
Ну со state вообще не разобрались, потому что ни слова о том, как использовать state в функциональных компонентах.
1
мужик, я понимаю о чем ты говоришь, но ты нихера не можешь объяснять, либо сам не врубаешься , либо думаешь что тебя смотрят исключительно middle react dev-ы
воу-воу, 3 видео за сутки!
Алексей, вы куда так разогнались ?
P.S: Спасибо за твои видео
Огромное спасибо от всех тех, кто не особо любит всяческие инструкции и документации =)) После твоих объяснений понятнее)
Приятно
Посмотрел, но так и не понял зачем bind(this). Вы как-то бегло прошлись по нему. Я пробовал без этой записи и все работает, но зачем тогда она нужна (а раз пишете, то ведь есть логика)?
ЕСТЬ, в современном учебнике глянь learn.javascript.ru/bind. С помощью bind можно сказать мы создаём другую функцию, в которой this всегда равен тому, что мы в скобки передаём. А так как при передаче в обработчик функции функция вызовется без контекста компонента, если так можно сказать, то нам необходимо его задать явно, например с помощью bind.
Куда ты так торопишься? Мало того, что не успеваешь за твоими словами, так ещё и на качестве твоего кода это отражается. И почему не назвал компоненты как-то по-нормальному? Почему за отступами не следишь - всё скачет туда-сюда. Новички за тобой не успеют.
Да ну, он все хорошо объясняет, хоть я в этом и шарю, просто вспомнить смотрю, дано не работал с реактом , все классно обьясняет, тот кто захочет поймет, есть видосы и хуже где реально тип гонит и не объясняет что к чему
Как новичок скажу - все очень понятно! Наконец начинаю выстраивать четкую структуру в голове, что такое реакт и как с ним работать. Большое спасибо!
друг, как успехи нау?
Нет, тяжело объясняет. Я на прошлом уроке не понял чем отличаются функции даже
Второй урок: ну вот три спички, мы одну отнимаем, получаем две
Третий урок: вот коробок, теперь его нет, почему объясню чуть позже
Спасибо вам ! Очень интересные уроки! Намного понятнее стало чем после доков из реакт. Привет из 11.5.2022))
Все актуально
А тебе привет из 24 октября 2023. Надеюсь Реакт тебе до сих пор интересен💪
Спасибо вам конечно за проделанную работу, но для новичка это сложно.
понимание придет!
@@SuprunAlexey Очень на это надеюсь :)
@@vladislav.c как ваши дела с реакт?
@@NewUserThisNewUser С реактом как то не пошло. Переключился на VUE. Тут как то всё пошло . Либо с подачей материала повезло, либо сам по себе попроще будет.
@@vladislav.c устроились ли на работу куда-то?
Из видео складывается впечатление как будто реакт делался не для того, что бы упростить процесс, а что бы наоборот - усложнить
Та нет
Примеры хорошие. Но их легче на чистом js сделать.
Если честно мне мало что понятно, так как я новичок. Возможно это крутой урок для тех, кто уже имеет какие-то основы и опыт работы, но мне лично мало что понятно.
Хочется более подробно узнать почему ты пишешь то или иное в коде и почему, по больше разжовывать по сути материал.
Практика в помощь )
изучите Java script, тогда всё станет понятно.
а почему пример только на классовых компонентах а не на функциональных
Yakub Yakubov завтра выйдет на функциональных
@@SuprunAlexey А где?
Не когда тут не поймёшь кто за что отвечает, чушь такую несёт слова не разобрать,
сложно. Надо больше разжевывания. Пойду другое видео искать.
Когда будем продолжать делать сайт на Reactjs из подключением библиотек и всего функционала такого как форма отбратной связи??
На этот раз слишком сложно, Алекс. Пожалуйста рассказывай про каждую позицию подробнее
Вот напишите что именно не понятно, какая строка?
@@SuprunAlexey сам код понятен, но непонятны сами state и props. Что это такое, за что отвечают, какие механизмы. Архитектура непонятна, в общем.
А так, я постоянный зритель твоего канала) всё делаешь очень годно и доступно!
@@srt2046 тут скорее нужно больше потренироваться с классами, конструкторами классов и методами классов в js, тогда всё понятнее будет.
Третий метод надо было назвать не reset а excrement
отличные уроки коротко без воды .но понятно.респект..у меня когда соединяешь через bind например ..increment = this.increment.bind(this); первая this показывает ошибку ..убираю все нормально..может последние версии ?
Внатуре четко, спасибо большое, все понятно объяснили
Привет. Подскажи, пожалуйста как плагин для VSCode называется который двумя кликами копипастить текст?
Очень не хватает таймкодов и банально ссылок на предыдущий и следующий урок. Не нашла плейлиста на этот курс.
Жаль что я так сильно затянул с изучением реакта, теперь в ускоренном темпе сижу учу его и дипломную переписываю
У меня не работает последнее приложение с инкрементами и дикриментами, как мне можно прислать фаил или фото на проверку наличия ошибок?
этот урок еще актуален? super props...кажется уже просто state = {}
Для новичка очень тяжело понять такой подход лучше функциональный компонент .
Отличные уроки, для знающих основы верстки и основы JS все понятно, смотря ваши уроки и параллельно читая документацию все встает на свои места. Grasias )))
Я слышал, что на классах давно никто не делает...
Спасибо за видео, немного сложновато для новичков. Слушала на скорости 0,75. много раз переслушивала, параллельно делала конспект и переписывала коды не только в программу, но и в тетрадь. На одно видео потратила около двух часов. И случилось чудо - всё стало понятным. Спасибо за ваш труд)
спасибо за урок классно обяснили
Уроки хорошие НО уже старые
Хороший материал. Спасибо за работу
Спасибо. Хороший урок.
Добрый день, подскажи пожалуйста. Если мы добавим к нашим сгенерированным - кнопку для того чтобы удалять строку. Как её реализовать ? textdel text
Что за чушь с точкой с запятой в новом JS. Уже давно можно выбирать с ; или без.
Чел можно было сделать пример ещё интересней не используя Условия можно было выводить или обновлять данные через . innerHTML ну или на скорости это сказывается ?
Я зеленый и только учусь, но зачем подобным образом писать стейты с конструкторами, если стейт и его изменение можно определить через React.useState ? Синтаксис куда проще.
Предположим у нас в state массив объектов. Вопрос, нам нужно конструировать абсолютно новый массив объектов с новым свойством, или мы можем изменить только нужное нам свойство в нужном объекте?
Спасибо за видео.
Только мне совсем понятно, зачем использовать bind(this) в примере с именем..?
У меня при клике и появлении надписи кнопка становится маленькой. Кто знает почему?
Топовый видос, до конца мне помог понять, как работает state. Но он реально для тех, кто уже немного поработал с ним, нужно больше разжёвывать для новичков. А так спасибо тебе большое!
Зачем дублировать кнопку при visibility?
Расскажи, пожалуйста, как через Apollo пробрасывать данные в React-компонент из MongoDB.
Если у меня максимально простой метод. Мне не нужны свойства класса и этот метод я дальше никуда не передаю в другие компоненты, нужно ли мне обязательно его биндить в конструкторе?
Если не делать bind то this не будет указать на твоего класса ( а если более правильнее не будет указать на объекта который был создан с твоего класса ) , то-есть если хочешь достать свойства то должен делать bind, или как уже в комментариях написали, можешь методы создавать с помощью стрелочных функций и не делать никакой bind
Отличный урок, спасибо!
Спасибо !!
Пришел к тебе с официальных доков и не пожалел!
Пройдите курс димыча и будет капзда как просто
это кто? Из фиксиков?Можно по подробней
курс уже не актуален
В защиту автора хочу сказать, что из всех видосиков, что я смотрел по теме state, в этом видео все довольно просто и понятно, первый раз было не очень, потом второй раз все стало ясно. Код я прописал, все работает.
Ребята, чтобы React легко давался, надо знать основы JS и HTML. Автору спасибо за простое и доступное объяснение.
Просто и информативно. Спасибо за ваши уроки!
а как мне сделать так, чтобы счетчик был, например, по модулю 3. Мне же надо тогда в инкременте проверять значение count Не понимаю синтаксис. Ну по любому там иф надо писать, но что писать в ифе непонятно.
handleClick = () => {
this.setState(prevState => {
return {count: prevState.count + 1}
})
}
все конечно хорошо. но в 2020 году bind писать при наличии стрелочных функций как-то не очень. а для начинающих что это понять что то одинаково, но все же лучше сразу запоминать как более прогрессивно.
У всех своё мнение
Может кто-то сможет объяснить. В state есть св-во color, могу ли я его менять не через setState, а через this.state.color : ...?
Не изменяйте состояние напрямую
!
В следующем примере повторного рендера не происходит:
// Неправильно
this.state.color = 'red';
Вместо этого используйте setState():
// Правильно
this.setState({color: 'red'});
Конструктор - это единственное место, где вы можете присвоить значение this.state напрямую.
Огромное благодарю !
а как сделать, чтоб при значении state=0 и нажимая на кнопку decrement не разрешать отрицательные значения?
по сути просто условие прописать
Спасибо, кратко и понятно
А какая у тема тема в Sublime Text для Css/html/js? Мне она очень понравилась, буду рад если напишешь название.
Вообще-то на видео Visual Studio Code, тема похожа на Dark(Visual Studio)
Зачем bind если можно использовать стрелочную функцию
Зачем писать на Реакт если можно использовать Vue?) так же и тут.
Спасибо большое за Ваш труд
Хорошая подача материала !!!
спасибо помогли
У меня такой вопрос можно ли в
increment() {
this.setState(state => ({
count: state.count + 1
}));
}
Прописать вместо + 1, просто ++
Т.к. я попробовал у меня не сработало
Мои догадки по этому следующее что ++ это сравнимо с присваиванием +=, а к state.count мы ничего не присваиваем, а просто добавляем 1.
Мне, конечно, не принципиально писать ++, просто интересно почему так не работает, а если и работает то как?
P.S. Просто хочу углубиться в понимание React'a. Спасибо)
И ещё вопрос почему в в случаях проращивания и убывания прописывается функция (стрелочная функция), а в случае обнуления ничего не пишем
@@PUBG-sf5en для начала надо разобраться почему в одном моменте идёт стрелочная функция, в другом просто setState и внутри объект. Все просто, когда тебе нужно обновить состояние и при этом тебе неважно, что до этого лежало в state, то ты пишешь setState и внутрь объект передаешь. Оно топорно обновит состояние. А вот когда тебе важно, что мол новое состояние зависит от старого, допустим у тебя счётчик... тебе перед тем как менять состояние на новое необходимо знать, а какое же там состояние сейчас, какая цифра в состоянии находится. То тут получается, что ты хочешь изменить состояние, но при этом оно ЗАВИСИТ от старого, то есть ты возьмёшь старое состояние и прибавишь допустим единицу к нему... тогда надо писать setState и передавать Стрелочную функцию, где она принимает аргумент предыдущего состояния.. это я ответил на второй вопрос и частично на первый. В первом вопросе как раз стрелочная функция и аргумент state. Осталось ответить почему + 1 а не ++. Все просто) в переменной state внутри стрелочной функции находится Старое состояние, мы не имеем право напрямую изменять состояние. То есть я не могу писать state++, оно равносильно state=state + 1 , поэтому надо писать state + 1
count: --state.count
count: ++state.count
Все будет работать
В каких проектах можно обойтись без реакта? С помощью шаблонизатора pug например)
Посмотрите у меня одно из последних видео что такое реакт
@@SuprunAlexey да я смотрел, там нет ключевых моментов что такое реакт)
А есть ли репозиторий с кодом?
Нет
Отлично. Быстро и понятно.
Спасибо
Бро твои видосы просто бомба для тех кто ищет годные уроки по react .Тебе огромно спасибо . Подписка + Лайк.Еще раз спасибо
Спасибо за видео.
=)
Как выучить JQuery ? Спасибо.
Учи js лучше
всем го it kamasutra
Чел не плохой, но смотреть 100 уроков, нет уж, спасибо
Спасибо за уроки, все объясняется очень доступно для новичков в работе с React, а кому сложно, нужно подтянуть ООП и JavaScript как минимум, иначе не поймете ничего!!!!