pointofpresence

<?php
$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response, JSON_UNESCAPED_UNICODE));
fclose($fp);

// or file_put_contents('results.json', json_encode($response, JSON_UNESCAPED_UNICODE))

pointofpresence

<?php
$json = json_decode(file_get_contents($file), true);

pointofpresence

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');

pointofpresence

Состояние компонента и useState

С помощью хука useState можно создать локальное состояние внутри функционального компонента. Раньше это было доступно только компонентам-классам.

import React from 'react';

// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);

pointofpresence

Побочные эффекты и хук useEffect

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

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

// выбираем цвет из массива
// и устанавливаем его в качестве фона страницы
function App() {

pointofpresence

Производительность и хук useCallback

Хук useCallback используется для улучшения производительности компонентов за счет мемоизации функций обратного вызова.

При частом обновлении постоянное пересоздание обработчиков – это дорогое удовольствие. useCallback позволяет изменять их только в случае реальной необходимости – когда изменяются связанные с ними зависимости.

// В таймере мы постоянно пересчитываем дату 
// при этом компонент каждый раз рендерится заново
// инкрементный счетчик при этом не увеличивается,

pointofpresence

newcolor.H = (color1.H + color2.H) / 2
newcolor.S = (color1.S + color2.S) / 2
newcolor.V = (color1.V + color2.V) / 2

pointofpresence

Мемоизация и хук useMemo

Хук useMemo очень похож на useCallback и также используется для повышения производительности. Разница заключается в том, что вместо функций-коллбэков useMemo запоминает результаты дорогостоящих вычислений.

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

Хук useMemo возвращает результат вычисления.

function App() {

pointofpresence

Рефы и хук useRef

Pефы – это специальные атрибуты, доступные всем React-компонентам. Они позволяют создать ссылку на компонент (или HTML-элемент) после того, как он появится в DOM.

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

С помощью такой ссылки можно изменять свойства элемент или вызывать его общедоступные методы (например, focus() у поля ввода).

function App() {

pointofpresence

Контекст и хук useContext

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

function App() {
  // храним данные пользователя в App
  // но выводим в Header
  const [user] = React.useState({ name: "Fred" });