Какой метод предпочтителен для React и TypeScript - PullRequest
Новая
       3

Какой метод предпочтителен для React и TypeScript

0 голосов
/ 01 ноября 2019

Ищите мнение о лучшей практике в будущем. Мы используем React с Typescript и начинаем новый проект. Глядя на предыдущие проекты, я вижу 2 разных стиля программирования вместе с большинством примеров здесь, в блогах и в документации. Мне интересно, есть ли производительность / память или какая-либо разница между 2 примерами кодов 

Sample 1
export class CustomerService extends BaseService {
    public async GetBase(contactId: number): Promise<Contact> {
        try {
            let res = await fetch(this.BASEURL + 'Contacts/' + contactId.toString(),
                {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${this._authentication.token.access_token}`
                    }
                });

                let results = await this.getBody(res);
                this.checkForErrors(res, results);
            let errors: ErrorList = this.checkForValidationErrors(res, results);
            if (errors != null) {
                return Promise.reject(errors);
            }
            return this._getContactEntity(results);
        }
        catch (err) {
            let errorList: ErrorList = this.buildErrorList(err, { 'key': 'Get Error', 'value': 'Failed to get contact', level: 0 });
            throw errorList;
        }
    }
}

//Sample 2
export const getSurvey = async (surveyPageId: number): Promise<Survey> => {
    const response = await getRequest('Survey', { contactId });
    const result = await response.json();
    const survey = new Survey(result[0]);
    return survey;
}

export const getRequest = async (endpoint: string, params?: URLParamType): Promise<Response> => {
    const endpointUrl = new URL(endpoint, document.location.href);
    if (params) {
        Object.keys(params).forEach(k => {
            endpointUrl.searchParams.append(k, params[k].toString());
        })
    }
    return fetcher(endpointUrl.toString(), {
        method: 'GET'
    })
}

Я вижу некоторые вещи, которые отличаются обработкой ошибок и аутентификацией в примере 1, но которые могут быть встроены в образец 2 какЧто ж. Интересно, как мне поступить в новом проекте.

1 Ответ

2 голосов
/ 01 ноября 2019

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

Я бы рекомендовал прочитать документацию о хуках для более подробного объяснения того, почему они были представлены и какие преимущества они предлагают по сравнению с компонентами на основе классов. Все, что может быть достигнуто с помощью компонентов класса, может быть выполнено с помощью ловушек (за исключением границ ошибок, я считаю), хотя реализация, безусловно, будет отличаться.

...