reactjs - 在不会渲染的类中使用 Hooks

Question

我有一个返回一些 JSX（一个离子项）的子类，它使用一个钩子来控制一些离子图标（使用钩子就像一个状态，但只是因为我可以使用非常方便的 useEffect）。

我也有蓝牙课。这是所有重要蓝牙功能的所在地。它在自己的类中的原因是因为我需要在应用程序中的任何地方都可以访问此代码（包括它创建的设备列表（上面提到的离子项目））。我这样做：

const _Bluetooth = () => {

    const [state, setState] = useState([]);
    useEffect(() => {
        addDevice();
    }, [state]);

    const devices: any[] = [];

    const bluetoothInitialize = () => {

        for (let i = 0; i < 5; i++) {
            let a = {name: "test", mac: i.toString(), connected:false}
            setState({found: [...state.found, a]});
        }
    }

    const connect = (id) => {
        console.log("connecting");
    }

    const addDevice = () => {
        let d = state.found[state.found.length - 1]
        devices.push(<BluetoothDeviceItem key={d.mac} mac={d.mac} name={d.name} onClick={(id) => connect(id)} connectingState={d.connected ? 'connected' : 'not_connected'}></BluetoothDeviceItem>);
    }

    return {
        devices, bluetoothInitialize, connect
    };
}

export default _Bluetooth;

然后，我在另一个文件中创建该类的一个实例，该文件充当全局文件，然后其他文件导入此全局文件，以访问该类的一个实例：

import _Bluetooth from '../components/bluetooth/Bluetooth'

export const Bluetooth = _Bluetooth();

不幸的是 _Bluetooth 类不起作用。由于我使用的是钩子，React 期望组件被渲染，因此组件需要返回 JSX。但是我不希望它返回 JSX，而是返回可访问的函数和变量。就像我上面所说的，我使用这些钩子更像是状态，但这仅仅是因为 useEffect 函数。我可以通过以下方式轻松完成这项工作：

const state = {found: []}

然后直接将项目推送到数组中。这剥夺了我使用 useEffect 的能力，这让我的生活更轻松，但也稍微清理了代码。

是否可以在不渲染组件/返回任何 JSX 的情况下使用钩子？

标签： reactjsionic-framework