Блог

У меня есть собственное приложение react, в котором я получаю заказы, сделанные клиентом, и отображаю их на стороне ресторана на определенном экране, я использую api выборки для получения данных, поэтому рабочий процесс-это заказ клиента на первое место и сохранение его в базе данных, а на стороне ресторана у меня есть эта функция :

 const loadData = async () =gt; {  const response = await fetch(`${API_URL}/getActiveOrders?ID=${id}`);  const result = await response.json();  if (result.auth === true) {   setCurrentOrders(result.data)   } else {  setCurrentOrders([])  }  }   useEffect(() =gt; {  const interval = setInterval(() =gt; {  loadData();  }, 1000)  return () =gt; clearInterval(interval)  }, [id]);  

как и в этой функции, она запускается каждую секунду и вызывает api на экспресс-сервер для извлечения данных из базы данных, поэтому я продолжаю получать заказы в ресторане без задержек. Но я заметил, что приложение отстает, когда интервал установлен на 1 секунду, и оно продолжает часто звонить на экспресс-сервер.

мой вопрос: Является ли это лучшим подходом для выполнения того же сценария (получение заказов в тот момент, когда они были размещены клиентом), или есть лучший способ сделать это без задержек, а также при получении больших данных производительность останется прежней или возникнут некоторые проблемы?

Если бы мне пришлось догадываться, в чем причина проблемы с задержкой, это было бы связано с тем, что у вас есть зависимость от useEffect крючка. Каждый раз, когда состояние обновляется, оно запускает другую визуализацию, и эффект запускается снова, и устанавливает другой интервал, и ваше приложение делает это раз в секунду.

Я предлагаю удалить зависимость и запустить эффект только один раз при монтировании компонента, а также очистить интервал при размонтировании.

 useEffect(() =gt; {  const interval = setInterval(() =gt; {  loadData();  }, 1000)  return () =gt; clearInterval(interval) }, []);  

Если id для получения запросов обновляются и вам нужно последнее значение, используйте ссылку React для сохранения id значения и используйте ее в URL-адресе запроса.

 const idRef = React.useRef(id);  useEffect(() =gt; {  idRef.current = id; }, [id]);  const loadData = async () =gt; {  const response = await fetch(`${API_URL}/getActiveOrders?ID=${idRef.current}`);  const result = await response.json();  setCurrentOrders(result.auth ? result.data : []); }  

В этом случае вам следует использовать websockets. Это лучший сценарий для использования websockets. Ваш сценарий похож на торговый веб-сайт.