Question

我是反应原生的新手。我希望将多个小的小字符串存储到常见的单例对象类，并希望从单个对象中为所有组件访问它。任何人都可以帮我单身对象实现反应原生。

前

组件1 - 登录按钮 - ＆gt;＆gt;成功 - ＆gt;需要将userID存储到singleton对象中。

组分2 - ＆gt;从singleton对象获取存储的userID。我该如何实现呢。

Answer 1

这是一种简单的方法......

export default class CommonDataManager {

    static myInstance = null;

    _userID = "";


    /**
     * @returns {CommonDataManager}
     */
    static getInstance() {
        if (CommonDataManager.myInstance == null) {
            CommonDataManager.myInstance = new CommonDataManager();
        }

        return this.myInstance;
    }

    getUserID() {
        return this._userID;
    }

    setUserID(id) {
        this._userID = id;
    }
}

以下是如何使用它......

import CommonDataManager from './CommonDataManager';


// When storing data.
let commonData = CommonDataManager.getInstance();
commonData.setUserID("User1");


// When retrieving stored data.
let commonData = CommonDataManager.getInstance();
let userId = commonData.getUserID();
console.log(userId);

希望这对你有用：）

Answer 2

我建议创建一个使用AsyncStorage存储数据的静态类。您在评论中提到您已使用AsyncStorage，但不要在整个应用中传播此功能。（即try-catches遍布整个地方，每个组件都需要检查密钥是否可用，等等。）如果此功能属于单个类，则会大量清理代码。

这种方法的另一个好处是你可以很容易地交换实现，例如，你可以选择使用内存中的对象或AsyncStorage或其他什么，你只需要更改这个文件

注意：AsyncStorage 是一种存储敏感信息的安全方式。有关{{1}安全性的更多信息，请参阅this question和替代品。

那就是说，这就是我想象的全局数据持有者类看起来的样子：

AsyncStorage

然后在您的应用中的任何位置使用此类，只需在需要的地方导入即可：

export default class dataManager {
  static storeKeyValue(key, value) {
    // your choice of implementation:
    // check if key is used
    // wrap in try-catch
    // etc.
  }

  static getValueForKey(key) {
    // get the value out for the given key
  }

  // etc...
}

编辑：在大多数情况下，使用Flux，Redux或类似技术可能是首选/建议的方式，但如果您感觉单身模式最适合您的应用程序，这是一个很好的方法。 请参阅You Might Not Need Redux

Answer 3

有一个解决方法，在编译阶段对生成包的所有模块做出反应，并在第一次要求之后为模块生成内部标识，从那时起引用在整个运行时内存中，所以如果我们从文件中导出一个类的实例，那么每次导入该文件时都会引用该对象。

TLDR;

解决方案I：

class abc {

}


module.exports = new abc()

解决方案II：我假设您希望获得静态且不会更改的字符串，因此您可以将它们声明为静态并直接使用类名访问它们

仅供参考：这也适用于webpack。

Answer 4

为此，我可能为时已晚，但我最好还是根据Yeshan Jay的回答分享自己的实现。

export default class Data {

    static instance = null;
    _state = {};
    static get inst() {
        if (Data.instance == null) {
            Data.instance = new Data();
        }
        return this.instance;
    }
    static get state() { 
        return Data.inst._state; 
    }
    static set state(state) { 
        Data.inst._state = state; 
    }
    static setState(state) { 
        Data.inst._state = {...Data.inst._state, ...state} 
    }
}

这是您的用法。这几乎模仿了React Component的状态行为，因此您应该几乎不需要调整就可以感到宾至如归，而无需经常修改Singleton来不时添加新属性。

import Data from './Data'

// change the whole singleton data
Data.state = { userId: "11231244", accessToken: "fa7sd87a8sdf7as" } 

// change only a property
Data.setState ({ userId: "1231234" }) 

// get a single property directly
console.log("User Id: ", Data.state.userId) 

// get a single property or more via object deconstruction
const { userId, property } = Data.state
console.log("User Id: ", userId)

Answer 5

TS类示例：

export class SingletonClass
{
    private static _instance: SingletonClass;

    public anyMetod(_value:any):any
    {
         return _value;
    }
    public static getInstance(): SingletonClass
    {
        if (SingletonClass._instance == null)
        {
            SingletonClass._instance = new SingletonClass();
        }
        return this._instance;
    }
    constructor()
    {
        if(SingletonClass._instance)
        {
            throw new Error("Error: Instantiation failed: Use SingletonClass.getInstance() instead of new.");
        }
    }
}

使用：

SingletonClass.getInstance().anyMetod(1);

单身对象反应原生

5 个答案: