Задать вопрос

xtalen

Ответы пользователя по тегу React

  • Выбор фреймворка для нового проекта - Angular? React? Vue?

    @xom9lk
    У вас большая команда. Выбрать стоит тот инструмент, который дает все необходимое для работы, т.е. Angular2, или Ember.
    Angular2 сейчас предполагает тотальное использование RxJS и это хорошо. Rx пользуется популярностью у разработчиков мобильных приложений и вы можете переиспользовать практики.

    По поводу Vue и React, да, они похожи если к React добавить MobX и перестать использовать this.state, и да, Vue - это View из Angular + computed;
    Проблемы использования Vue и React в командах очевидны: один хочет использовать такое хранилище/роутер/библиотеку, другой - другое, через неделю - третье. Нет нормальных CLI инструментов. Этот мир изменчив и нестабилен, хотя, в последнее время устаканивается.
    Вот простейшие компоненты на React и Vue:

    Vue (typescript):
    import * as Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  template: '<div><div>{{message}}</div><button @click="onClick">Click!</button></div>'
})
export class MyComponent extends Vue {
  static message: string = 'Hello!';
  protected showMessage: boolean = false;

  onClick (): void {
      this.showMessage = !this.showMessage;
  }
  
  get message(): string {
      return this.showMessage ? MyComponent.message : '';
  }
}


    React + MobX (typescript):
    import * as React from "react";
import {observable, action, computed} from "mobx";
import {observer} from "mobx-react";

@observer
export class MyComponent extends React.Component<{}, {}> {
    static message: string = 'Hello!';

    @observable
    protected showMessage: boolean = false;

    @action
    onClick = (): void => {
        this.showMessage = !this.showMessage;
    };

    @computed
    get message(): string {
        return this.showMessage ? MyComponent.message : '';
    };

    render() {
        return (
            <div>
                <div>{this.message}</div>
                <button onClick={this.onClick}>Click!</button>
            </div>
        );
    }
}


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

  • Как правильно разделить ответственность между состоянием интерфейса и дерева состояния в React и REDUX?

    @xom9lk
    dropID в state в данном случае хранить необязательно, зачем лишний раз пересчитывать DOM. Достаточно хранить в объекте: this.dropID = p.id, т.к. его никто не изменит, за то время, пока открывается modal.

    2 вариант более правильный - биндить dropID
    <Button onClick = {openModal.bind(null, p.id)}>Drop</Button>

// actions/pageChoice.js
export function openModal(dropId){
        return {type:'OPEN_DROP_MODAL', dropId}
}

// reducers/pageChoice.js
case 'OPEN_DROP_MODAL':
                      return {
                              ...state,
                              dropId: action.dropId,
                              modalOpen:true
                      }
                      break;
    Ответ написан
    1 комментарий
    1 комментарий

  • Как указать для поля переменную "видимость" в React?

    @xom9lk 
    <form onSubmit={this.handleSubmitTest}>

//Мы задаем один и тот же стейт на открытие фрагмента формы и на required,
//соответственно если форма открыта, то и поле необходимо
<Input type="checkbox"  onChange={()=>this.setState({check: !this.state.check})}/>

<Input type="text" placeholder="Enter UR Number" required={this.state.check}/>

<ButtonInput type="submit" value="Submit Button"/>
</form>


    Браузер будет подсказывать, что поле обязательно. Если хочешь сам валидацию делать - перехватывай событие onSubmit и проверяй event.target.myinput.required.
    Ответ написан
    4 комментария
    4 комментария

  • Последовательность выполнения запросов в SPA React Redux?

    @xom9lk
    Немного не понял в чем проблема. Было бы понятнее с кодом обработчика клика на кнопку и кодом action.
    Предположу что ты вызываешь action друг за другом, оберни каждый вызов в SetTimeout(()=>{action()}, 0);

    Должно быть что-то типа (без привязки к Redux):
    onClick(data) {
    rest.post("url to backend", {data})
    .then((response) = > {
        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_1,
                data: response.data
            });
        }, 0);

        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_2,
                data: response.data
            });
        }, 0);

        setTimeout(() = > {
            AppDispatcher.dispatch({
                actionType: AppConstants.INTERESTED_3,
                data: response.data
            });
        }, 0);
    })
    .catch(() => {
        AppDispatcher.dispatch({
            actionType: AppConstants.SERVER_ERROR
        });
    });
}
    Ответ написан
    Комментировать
    Комментировать