Question

我有一个AuthService类，该类提供所有api调用并处理这些调用的身份验证，因此它是一种不错的模块化服务。它不是一个React组件，也不在任何渲染调用中使用。它主要处理提取调用。现在，在其他许多类中，我都使用此类的单个全局实例，并将其导入顶部。

我认为上下文不是正确的方法，因为它不是对象类型，也不在渲染中使用。我在componentDidMount（）和useEffect（）中使用实例。

一个例子：

//at the bottom, outside curly braces defining AuthService
export const Auth = new AuthService();

消费者：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from 'react';
import CommentList from "./CommentList";
import CommentForm from "./CommentForm";
import Comment from "./Comment";
import AuthService from './AuthService';
import { Auth } from './AuthService';

export default function CommentBox(props) {

const [comments, setComments] = useState([]);
// const Auth = new AuthService();
const [formText, setFormText] = useState('');
const [update, setUpdate] = useState(false);

useEffect(() => {

    Auth.fetch('/comments/get_comment_for_bill/' + props.id + '/').then((data) => {
        if (typeof data[0] !== 'undefined') {
            setComments(data);
        } else {
            setComments([]);
        }
        setUpdate(false);
    });
    return () => {
        return;
    }
}, [props, update]);

return (
    <div >         
        <CommentList comments={comments}/>
        <CommentForm id={props.id} formText={formText} setFormText={setFormText} setUpdate={setUpdate}
            onChange={e => {
                setFormText(e.target.value);                  
            }} />           
    </div>

);
}

Answer 1

我认为在React中使用单例的最好方法是将其附加到window对象。只需确保首先将单例附加到对象，该对象又附加到窗口对象-避免污染窗口名称空间。您只需在启动脚本中执行一次此附加操作即可：

index.js

var window.app = {}
window.app.authentication = (function() {
   function authenticateUser(userId) {

   }

   return {
      authenticateUser: authenticateUser
   }
})();

然后在其他要使用它的模块中：

Login.js

window.app.authentication.authenticateUser("johndoe");

Answer 2

很好。没错但是，为什么对所有内容都使用同一实例？

new AuthService()

我建议您导出AuthService。然后，每当需要使用该服务时，定义一个新实例并使用：

const Auth = new AuthService()
// now, use Auth

这只是个人选择。

我应该导出单例类供React中使用吗？

2 个答案: