时间戳

首页 > 解决方案 > 对于 React 和 TypeScript，哪种方法是首选方法

reactjs - 对于 React 和 TypeScript，哪种方法是首选方法

问题描述

寻找关于未来最佳实践的意见。我们正在使用带有 Typescript 的 React 并开始一个新项目。查看以前的项目，我在这里、博客和文档中看到了 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。想知道我应该如何进行新项目。

标签： reactjstypescriptsingle-page-application

解决方案

看起来你在问你是否应该使用类组件或带有钩子的功能组件，在这种情况下，答案肯定是后者。尽管类组件是完全有效的，并且会在一段时间内继续得到支持，但它们正逐渐被功能组件/钩子淘汰，所以如果你从头开始一个项目，没有理由不使用它们。

我建议阅读有关钩子的文档，以更深入地解释为什么要引入钩子，以及它们相对于基于类的组件有什么优势。可以用类组件完成的所有事情都可以用钩子完成（我相信错误边界除外），尽管实现肯定会有所不同。

推荐阅读