Size: a a a

React — русскоговорящее сообщество

2020 July 05

NE

Nikita E in React — русскоговорящее сообщество
ʙᴀᴋʜʀᴏᴍ
То что я имел ввиду разве не декларавивность называется?
Используй темплейт литерал если тебе так легче)
Вообще если хочется больше декларативности то советую почитать про функциональщину
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
Nikita E
Используй темплейт литерал если тебе так легче)
Вообще если хочется больше декларативности то советую почитать про функциональщину
мне кажется он просто спутал декларативность с каким то другим термином и все)
источник

NE

Nikita E in React — русскоговорящее сообщество
Александр Бакиматов
мне кажется он просто спутал декларативность с каким то другим термином и все)
Не подумал об этом) да, скорее всего
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
Nikita E
Декларативность не в синтаксисе а организации кода.
Например когда ты мапишь что-либо вместо использования циклов или других вспомогательных конструкций языка - это декларативность
ну вообще позволю себе немного не согласиться, дело то не в том чтобы не использовать вспомогательные конструкции. в конкретном примере есть 2 отличительные черты - первая в мапе в отличие от классического цикла for  - нет состояния, а вторая черта это то что map отвечает на вопрос ЧТО мы хотим получить, в то время как for отвечает на вопрос КАК.
источник

NE

Nikita E in React — русскоговорящее сообщество
Александр Бакиматов
ну вообще позволю себе немного не согласиться, дело то не в том чтобы не использовать вспомогательные конструкции. в конкретном примере есть 2 отличительные черты - первая в мапе в отличие от классического цикла for  - нет состояния, а вторая черта это то что map отвечает на вопрос ЧТО мы хотим получить, в то время как for отвечает на вопрос КАК.
Пытался понятным языком объяснить) Ты прав. Я это понимаю так - в императивном подходе объявляются различные реакции на действия и связываются каким то отдельно объявленным стейтом. Это удобно, если тебе самостоятельно нужно менеджить память по идее. В декларативном подходе можно просто ограничиться описанием самого выполнения и связать это все композицией, чейном итд в результате выполнения правил функционального программирования. Чистота функций, функции высшего порядка, правила identity и composition так или иначе перекочевав в js сделали возможным написание декларативного кода
источник

NE

Nikita E in React — русскоговорящее сообщество
Nikita E
Пытался понятным языком объяснить) Ты прав. Я это понимаю так - в императивном подходе объявляются различные реакции на действия и связываются каким то отдельно объявленным стейтом. Это удобно, если тебе самостоятельно нужно менеджить память по идее. В декларативном подходе можно просто ограничиться описанием самого выполнения и связать это все композицией, чейном итд в результате выполнения правил функционального программирования. Чистота функций, функции высшего порядка, правила identity и composition так или иначе перекочевав в js сделали возможным написание декларативного кода
Под реакциями я имею ввиду всякие конструкторы, методы и лайфсайклхуки, которые описываются, как то называются и впринципе часто являются генераторами сайд эффектов
источник

NE

Nikita E in React — русскоговорящее сообщество
Но я не настаиваю на своей правоте тк тема тонкая а эрудиция из меня не хлещет)
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
кек, та не, норм все) мне тоже часто бывает сложно выразить такие тонкие штуки в адекватной форме, понимаю)
источник

А

Артур in React — русскоговорящее сообщество
const [score, setScore] = useState(0);

 const scorCounter = () => {
   setScore(score + 10)
 }

 const upHandler = ({ key }) => {
   if (key === 'ArrowLeft') {
     scorCounter()
   }
 };

 useEffect(() => {
   window.addEventListener('keyup', upHandler);
   return () => {
     window.removeEventListener('keyup', upHandler);
   };
 }, []);

const handlerAnswer = () => {
   scorCounter()
 };

<div className='controllers'>
         <Button
           disabled={false}
           onKeyUp={upHandler('ArrowLeft')}
           onClick={handlerAnswer}
           className='uncorrect-button'
           type='button'
           children='Не верно'
         />
         <Button
           disabled={false}
           onClick={handlerAnswer}
           className='currect-button'
           type='button'
           children='Верно'
         />
  </div>


как это работает если ***handlerAnswer**** использую тоесть нажимаю на кнопку ***score*** результат конкатенируется, а если потом на клавишу жму, счет обнуляется и добавляется только один раз

Идеально что бы было так, тыкаешь на кнопки "правильно" "не правильно" счетчик увеличивается на N, при нажатии  стрелки на клаве происходило то же самое

где я туплю
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
Артур
const [score, setScore] = useState(0);

 const scorCounter = () => {
   setScore(score + 10)
 }

 const upHandler = ({ key }) => {
   if (key === 'ArrowLeft') {
     scorCounter()
   }
 };

 useEffect(() => {
   window.addEventListener('keyup', upHandler);
   return () => {
     window.removeEventListener('keyup', upHandler);
   };
 }, []);

const handlerAnswer = () => {
   scorCounter()
 };

<div className='controllers'>
         <Button
           disabled={false}
           onKeyUp={upHandler('ArrowLeft')}
           onClick={handlerAnswer}
           className='uncorrect-button'
           type='button'
           children='Не верно'
         />
         <Button
           disabled={false}
           onClick={handlerAnswer}
           className='currect-button'
           type='button'
           children='Верно'
         />
  </div>


как это работает если ***handlerAnswer**** использую тоесть нажимаю на кнопку ***score*** результат конкатенируется, а если потом на клавишу жму, счет обнуляется и добавляется только один раз

Идеально что бы было так, тыкаешь на кнопки "правильно" "не правильно" счетчик увеличивается на N, при нажатии  стрелки на клаве происходило то же самое

где я туплю
чтобы здесь всегда было актуальное значение - нужно передавать функцию setScore(score => score + 10)
источник

А

Артур in React — русскоговорящее сообщество
Александр Бакиматов
чтобы здесь всегда было актуальное значение - нужно передавать функцию setScore(score => score + 10)
болдежь))) работает!
источник

А

Артур in React — русскоговорящее сообщество
🙏 спасибо) иду читать про стейт обратно)))
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
про замыкания еще почитай)
источник

А

Артур in React — русскоговорящее сообщество
Александр Бакиматов
про замыкания еще почитай)
ок)
источник

ТК

Таймураз Кайтмазов... in React — русскоговорящее сообщество
Александр Бакиматов
про замыкания еще почитай)
Там мног про что читать надо
источник

ТК

Таймураз Кайтмазов... in React — русскоговорящее сообщество
Наименования функций, мемоизация хендлеров на хуках, линтер
источник

ТК

Таймураз Кайтмазов... in React — русскоговорящее сообщество
Библия
источник

АБ

Александр Бакиматов... in React — русскоговорящее сообщество
Таймураз Кайтмазов
Наименования функций, мемоизация хендлеров на хуках, линтер
+ мне честно говоря лень полноценный фидбек было вкидывать, только по конкретной проблеме)
источник

ТК

Таймураз Кайтмазов... in React — русскоговорящее сообщество
Таймураз Кайтмазов
Наименования функций, мемоизация хендлеров на хуках, линтер
Это не обязательно
источник

ТК

Таймураз Кайтмазов... in React — русскоговорящее сообщество
Александр Бакиматов
+ мне честно говоря лень полноценный фидбек было вкидывать, только по конкретной проблеме)
Да я понял, просто решил доебаться до кода
источник