WebSocket 升級到 react18 后斷開連接

Question

將我的 React 項目從版本 17.0.2 升級到版本 18.0.0 后，我注意到了一些有趣的事情。

在我的應用程序的主頁上，我正在使用 SignalR 打開 WebSocket 的連接。 React 17.0.2 一切運行良好，但升級到 React 18.0.0 后，由於某種原因，WebSocket 一直斷開連接。 之后，我切換回 React 17.0.2 並修復了問題。

我不太確定為什么，也找不到與該主題相關的任何問題。

我唯一做的就是更新我的package.json以使用react和react-dom的第 18 版，然后在index.js中進行了必要的更改。

如果有人在升級到 React 18 后遇到類似的問題，一些信息會很有幫助。

謝謝，同時我會做更多的研究，也許我可以找出問題所在。

更新問題似乎與包裝我的整個應用程序代碼的<React.StrictMode>有關。

出於某種原因，當使用嚴格模式時，react 會觸發 useEffect 清理 function，它會在您離開主頁后斷開 WebSocket 與主頁的連接。 我已經刪除了嚴格模式，現在它工作正常（這僅適用於 react 18，如果我繼續使用嚴格模式的 react 17，我沒有這個“問題”）

有關 React.StrictMode 如何工作的更多信息： https://github.com/reactwg/react-18/discussions/19

Answer 1

這意味着您的系統中存在潛在的錯誤。 用戶應該能夠離開負責設置集線器連接的組件，然后返回（這是嚴格模式試圖模擬的）。 這就是我們正在做的（在自定義中間件中）

async init() {
    this.connection = new HubConnectionBuilder()
        .withUrl("url-to-your-hub", yourHubConfig)
        .withAutomaticReconnect()
        .build();

    this.connection.start().then(() => {
        this.connection?.on(HubClientMethod,
            (message: HubMessage) => this.onSocketMessage(message));

        if (this.shouldStopConnection) {
            this.cleanUpConnection();
            this.shouldStopConnection = false;
        }
    });
}

async cleanUpConnection() {
    if (!this.connection) return;

    if (this.connection.state === HubConnectionState.Connecting) {
        this.shouldStopConnection = true;
        return;
    }
    this.connection.off(HubClientMethod);
    await this.connection.stop();
    this.connection = null;
}