Правильный способ получения данных с помощью реакции с использованием socket.io

Question

Я не нашел примеров того, как получать данные с экспресс-сервера с помощью реакции с socket.io.

Теперь я делаю что-то вроде этого: Server.js

io.on('connection', socket => {
  console.log(socket.id)

  socket.on('disconnect', () => {
    console.log(socket.id + ' disconnected')
  })

  socket.on('load settings', () => {
    socket.emit('settings is here', data)
  })
})

React.js

const [socket] = useState(io())
  const [settings, setSettings] = useState(false)

   useEffect(() => {
    try {
      socket.emit('load settings');

      socket.on('settings is here', (data) => {
        // we get settings data and can do something with it
        setSettings(data)
      })
    } catch (error) {
      console.log(error)
    }
  }, [])

Answer 1

Это выглядит хорошо, но есть некоторые вещи, которые вы можете улучшить, такие как отключение сокета перед размонтированием и не превращение сокета в состояние (см. Пример кода ниже).

Если вы 'Он запутался в том, как переносить существующий код на хуки, сначала выписать компонент с использованием классов, а затем портировать его по частям на хуки.Вы можете сослаться на этот StackOverflow ответ в виде таблицы.

Использование традиционных классов с использованием socket.io выглядит следующим образом:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.socket = io();
  }

  componentDidMount() {
    this.socket.open();
    this.socket.emit('load settings');
    this.socket.on('settings is here', (data) => {
      // we get settings data and can do something with it
      this.setState({
        settings: data,
      })
    });
  }

  componentWillUnmount() {
    this.socket.close();
  }

  render() {
    ...
  }
}

Затем вы можете портировать this.socket для использования useRef (он не должен быть частью state, поскольку ваша render() функция не нуждается в этом. Поэтому useRef является лучшей альтернативой (хотя useState, вероятно, все еще будет работать).

Порт componentDidMount() через использование useEffect иПередача пустого массива в качестве второго аргумента для запуска обратного вызова эффекта только при монтировании.

Порт componentWillUnmount() путем возврата функции обратного вызова в обратном вызове useEffect, который React будет вызывать перед размонтированием.

function App() {
  const { current: socket } = useRef(io());
  const [settings, setSettings] = useState(false);

  useEffect(() => {
    try {
      socket.open();
      socket.emit('load settings');
      socket.on('settings is here', (data) => {
        // we get settings data and can do something with it
        setSettings(data);
      })
    } catch (error) {
      console.log(error);
    }
    // Return a callback to be run before unmount-ing.
    return () => {
      socket.close();
    };
  }, []); // Pass in an empty array to only run on mount.

  return ...;
}