Задать вопрос
Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (11)

Наибольший вклад в теги

Все теги (34)

Лучшие ответы пользователя

Все ответы (96)
  • Что такое Redux простыми словами?

    @KnightForce
    Чтобы понять как работает Redux тебе нужно норм вкуривать React.
    Хотя бы для того, чтобы не пугаться props.

    Есть у тебя React. Это все просто JS объекты.
    <Component /> - так позволяет писать движок jsx, который и React его использует.
    Так как структура компонентная, ты должен думать как обновить компоненты в в другой части страницы.

    Принцип такой: компонент обычно обновляется при получении новых свойств - props или когда меняется его объект состояния - state.

    Чтобы тебе обновить дальние друг от друга компоненты- тебе нужно продумать какие и где приходят свойства - чтобы пробросить функцию, которая вызовет перерисовку.

    Что делает Redux:
    Он не призывает отказываться от state.

    Но есть общий контейнер данных. И когда данные меняются - меняются и компоненты, которые отображают именно эти данные.

    Когда нужно что-то поменять - вызываешь dispatch - специальная функция reducer реагирует на это - и меняет данные как тебе нужно. Когда данные заменятся - компонент Propvider - вызывает рендер у своего дочернего компонента (тот что оборачивает Provider).
    Например:
    <Provider>
       <MyComponent />//Вот сюда Provider пробросит (запишет) новые props.
    </Provider>


    Записывает он это самое глобальное хранилище и все компоненты, для которых поменялись данные - перерисуются.

    mapStateToProps - указывает какую часть этого глобального хранилища будет предоставлять provider.
    Если у тебя оно такое:
    {
       chunkStore: {},
       some: {}
    }

    То если mapStateToProps вернет{store: store.chunkStore}то Provider в props своего потомка пробросит такое: store: store.chunkStore. И ты будешь обращаться внутри к store, но там будет только часть chunkStore (не весь объект, а его поле).

    mapDispatchToProps - т.к. subscribe нет, то это возвращает функции, которые могут внутри себя вызывать dispatch().

    action - описывает то что и на что ты хочешь поменять. Какое поле и какие данные туда поместить.
    Ответ написан
    Комментировать
  • Как теряется контекст в классовых компонентах, и как помогает bind?

    @KnightForce
    Если используешь метод внутри класса - то не нужно.
    class Div extends Component {
      constructor(props) {
        super(props);
        this.props=props;
      }
    
      showAlert(value) {
          alert(value);
      }
    
      render() {
          this.showAlert(1);
        return (
          <div>
    
          </div>
        );
      }
    }


    Все будет норм.
    Но если ты будешь передавать какой-то метод в обработчик или в дочерний компонент, то произойдет следующее:
    this - текущий контекст - класс в котором объявлен.
    Далее button (это хоть и простой jsx, но все же компонент) - внутри себя вызывает this.имяМетода - this уже сменился.
    Вот пример:
    class Div extends Component {
      constructor(props) {
        super(props);
        this.props=props;
      }
    
      showEvent(e) {
          alert(e);
      }
    
      render() {
          this.showAlert(1);
        return (
          <div>
              <button onClick={this.showEvent}></button>
          </div>
        );
      }
    }


    this - определяется в момент вызова.
    Чтобы все было ок, есть следующие пути привязки контекста:
    1)var self = this - сохранение в переменную.
    2)apply - вызов метода с явной передачей контекста.
    3)bind(some) - привязка контекста. Говорит функции что использовать в качестве контекста, потом изменить контекст нельзя.
    4)()=>{} - стрелочная функция, которая в отличие от function(){} - определяет контекст не в момент вызова, а в момент объявления.

    Используется фиксированный контекст и метод вызывается используя то что нужно, а не пытается вызваться от другого объекта.
    Ответ написан
    4 комментария
  • Зачем нужен constructor в react?

    @KnightForce
    Он нужен не в React, а в классе.
    В данном случае можно сделать и так и так.
    Ответ написан
    6 комментариев
  • Был ли у кого-то опыт перехода с React Native на Flutter?

    @KnightForce
    Да.
    Flutter быстрее, гибче, стабильнее.
    Нет проблем с Java / Swift, когда проект не собирается.
    Платформа по сути одна - движок Skia.
    Рендерит ОДИНАКОВО на Android и iOS.

    Я доволен.
    Ответ написан
    Комментировать
  • Как получить индекс элемента с двумя классами?

    @KnightForce
    let list = $('.class1');
    for(let i = 0; i < list.length; i++) {
     if(list.eq(i).hasClass('class2')) {
        console.log(i);
        break;
     }
    }


    let list = $('.class1');
    for(let i = 0; i < list.length; i++) {
     if(list[i].className.includes('class2')) {
        console.log(i);
        break;
     }
    }


    $('.class1').each((index, item) => {
     if(item.className.includes('class2')) console.log(index)
    } );
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (178)