React Native应用运行时为何多次重复连接TCP服务端？

两个异常均由React函数组件副作用逻辑放置位置错误导致：

• 重复建连：TCP实例创建、事件监听逻辑直接写在组件函数体顶层，React每次触发重渲染都会重新执行这部分代码，每执行一次就生成新的TCP客户端并发起连接，最终产生多次重复连接。
• 页面闪烁、输出异常：重复创建的多个客户端会同时接收数据、重复触发状态更新；同时状态更新时直接使用闭包捕获的旧值做计算，高频更新场景下会出现状态覆盖、内容错乱；加上未做组件卸载时的连接清理，无效状态更新会持续触发重渲染导致闪烁。此外原代码中dat == "ALRCON"的判断被嵌套在dat == "ACCGNT"的判断块内部，逻辑永远无法触发。

• 将TCP连接创建、事件绑定逻辑移入useEffect，传入空依赖数组，保证逻辑仅在组件首次挂载时执行一次
• 状态更新改用函数式写法，规避闭包旧值导致的状态计算错误
• 在useEffect返回的清理函数中主动销毁TCP连接、移除事件监听，避免内存泄漏和无效更新
• 修正嵌套的条件判断结构，保证服务端返回的不同指令都能被正确响应

修复后可直接运行的代码如下：

import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import TcpSocket from 'react-native-tcp-socket';
const cert = require('./certificate.pem');

export default function AssetExample() {
  const [out, setOut] = useState('Connecting...');
  const [count, setCount] = useState(0);

  useEffect(() => {
    const client = TcpSocket.createConnection(
      {
        port: 4242,
        host: '192.168.1.108',
        tls: true,
        tlsCheckValidity: false,
        tlsCert: cert
      },
      () => {
        console.log("Connected");
        client.write("1");
        client.write("2");
        client.write("3");
        client.write("4");
      }
    );

    client.on("data", (data) => {
      console.log(data);
      const dat = data.toString();
      setCount(prev => prev + 1);
      setOut(prev => prev + "\n" + dat);

      if (dat === "") {
        console.log("discon");
      }
      if (dat === "ACCGNT") {
        console.log("GRANTED");
      }
      if (dat === "ALRCON") {
        client.destroy();
      }
    });

    // 组件卸载时清理连接和监听
    return () => {
      client.removeAllListeners();
      client.destroy();
    };
  }, []);

  return (
    <View>
      <Text>{count}</Text>
      <Text>{out}</Text>
    </View>
  );
}

注：原代码中从react-native-web引入的Touchable相关依赖、未使用的StyleSheet/Image/Button等导入属于冗余内容，修复时已移除，不影响核心TCP连接逻辑。

内容的提问来源于stack exchange，提问作者Low Est