响应多个导入、一个模块缓存重用

Question

我正在使用Centrifugo websocket服务器。我需要连接到Centrifugo并存储连接instance，以便将来从多个components中使用。

这是从./socket.js创建这种导出的好方法吗？

如果我要导入多个centrifuge.connect()模块的话，centrifuge.setToken('')和./socket.js会被执行吗？

./socket.js

const Centrifuge = require('centrifuge');

const centrifuge = new Centrifuge('ws://localhost:8000/connection/websocket');
centrifuge.setToken('');
centrifuge.connect();

export default {
    socket: centrifuge,
};

./App.jsx

import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';

export default () => (
    <>
        <SomeComponent />
        <SomeSecondComponent />
    </>
)

./components/SomeComponent.jsx

import React from 'react';
import { socket } from '../socket'; // second import

export default () => <>...</>;

./components/SomeSecondComponent.jsx

import React from 'react';
import { socket } from '../socket'; // third import

export default () => <>...</>;

什么是创建实例和重用它的最佳方式？

Answer 1

如果您只想使用单个实例，最好只在一个地方导入它。最好导入父组件并将其作为道具传递给子组件。

所以你的app.jsx会变成：

import React from 'react';
import { socket } from '../socket'; // first import
import SomeComponent from './components/SomeComponent';
import SomeSecondComponent from './components/SomeSecondComponent';

export default () => (
    <>
        <SomeComponent socket={socket} />
        <SomeSecondComponent socket={socket} />
    </>
)

现在套接字将作为两个组件中的支柱。

就像。在./components/SomeComponent.jsx中

import React from 'react';

export default ({socket}) => <>...</>;