Доступ к данным через рефы в React
2 года назад·6 мин. на чтение
Если вы хотите, чтобы React компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы)
Содержание туториала по React
Если вы хотите, чтобы компонент «запоминал» некоторую информацию, но вы не хотите, чтобы эта информация запускала новые рендеры, вы можете использовать ref (рефы).
При нажатии кнопки «Стоп» нужно отменить существующий интервал, чтобы он перестал обновлять переменную состояния now. Вы можете сделать это, вызвав
Вот кнопка-счетчик, реализованная с состоянием:
Добавление рефа в компонент
Вы можете добавить реф в свой компонент, импортировав хукuseRef
из React:
Внутри вашего компонента вызовите хукimport { useRef } from 'react';
useRef
и передайте начальное значение, на которое вы хотите сослаться, в качестве единственного аргумента. Например, вот ссылка на значение 0
:
const ref = useRef(0);
useRef
возвращает такой объект:
Вы можете получить доступ к текущему значению этого рефа через свойство{ current: 0; // Значение, отправленное в useRef }
ref.current
. Это значение является изменяемым, то есть вы можете как читать, так и писать в него. Это как секретный карман вашего компонента, который React не отслеживает. (Вот что делает его лозейкой из одностороннего потока данных React — подробнее об этом ниже)
В примере ниже кнопка будет увеличивать ref.current
при каждом нажатии:
Реф указывает на число, но, как и состояние, вы можете указать что угодно: строку, объект или даже функцию. В отличие от состояния,import { useRef } from 'react'; export default function Counter() { let ref = useRef(0); function handleClick() { ref.current = ref.current + 1; alert('You clicked ' + ref.current + ' times!'); } return <button onClick={handleClick}>Click me!</button>; }
ref
— это простой объект JavaScript со свойством current
, которое вы можете читать и изменять.
Обратите внимание, что компонент не перерисовывается при очередном инкременте. Как и состояние, React сохраняет рефы между повторными рендерингами. Однако установка состояния повторно рендерит компонент. А изменение рефа - нет.
Пример: создание секундомера
Вы можете комбинировать рефы и состояние в одном компоненте. Например, давайте создадим секундомер, который пользователь может запускать или останавливать нажатием кнопки. Чтобы отобразить, сколько времени прошло с тех пор, как пользователь нажал «Старт», вам нужно будет отслеживать, когда была нажата кнопка «Старт» и какое сейчас время. Эта информация используется для рендеринга, поэтому вы сохраните ее в состоянии:Когда пользователь нажимает «Старт», вы будете использоватьconst [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null);
setInterval
для обновления времени каждые 10 миллисекунд:
import { useState } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); function handleStart() { // Начало отсчета setStartTime(Date.now()); setNow(Date.now()); setInterval(() => { // Обновление текущего времени каждые 10 мс setNow(Date.now()); }, 10); } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>Time passed: {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}>Start</button> </> ); }
clearInterval
, но вам нужно указать идентификатор интервала, который ранее возвращался вызовом setInterval
, когда пользователь нажимал «Старт». Вам нужно где-то хранить идентификатор интервала. Поскольку идентификатор интервала не используется для рендеринга, вы можете сохранить его в рефе:
Когда информация используется для рендеринга - держите ее в состоянии. Когда информации нужна только обработчикам событий и ее изменение не требует повторного рендеринга - использование ссылки может быть более эффективным.import { useState, useRef } from 'react'; export default function Stopwatch() { const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); const intervalRef = useRef(null); function handleStart() { setStartTime(Date.now()); setNow(Date.now()); clearInterval(intervalRef.current); intervalRef.current = setInterval(() => { setNow(Date.now()); }, 10); } function handleStop() { clearInterval(intervalRef.current); } let secondsPassed = 0; if (startTime != null && now != null) { secondsPassed = (now - startTime) / 1000; } return ( <> <h1>Time passed: {secondsPassed.toFixed(3)}</h1> <button onClick={handleStart}>Start</button> <button onClick={handleStop}>Stop</button> </> ); }
Различия между рефами и состоянием
Возможно, вы думаете, что рефы кажутся менее «строгими», чем состояние. Например, вы можете изменить их вместо того, чтобы постоянно использовать функцию установки состояния. Но в большинстве случаев вы захотите использовать состояние. Рефы — это лозейка, которая вам часто не потреюуется. Сравним состояние и рефы:Рефы | Состояние |
---|---|
useRef(initialValue) возвращает { current: initialValue } | useState(initialValue) возвращает текущее значение переменной состояния и функцию установки состояния ([value, setValue] ) |
Не запускает повторный рендеринг при его изменении. | Запускает повторный рендеринг при его изменении. |
Изменяемый — вы можете изменять и обновлять значение current вне процесса рендеринга. | Неизменный (иммутабельный) — вы должны использовать функцию установки состояния, чтобы изменить переменные состояния, чтобы поставить в очередь повторный рендеринг. |
Вы не должны читать (или записывать) значение current во время рендеринга. | Вы можете прочитать состояние в любое время. Однако каждый рендер имеет свой собственный снимок состояния, который не меняется. |
Поскольку отображается значениеimport { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return <button onClick={handleClick}>You clicked {count} times</button>; }
count
, имеет смысл использовать для него значение состояния. Когда значение счетчика устанавливается с помощью setCount()
, React повторно отображает компонент, и экран обновляется, чтобы отразить новое значение счетчика.
Если вы попытаетесь реализовать это с помощью ref
, React никогда не будет повторно отображать компонент, поэтому вы никогда не увидите изменения счетчика. Посмотрите, как нажатие на эту кнопку не обновляет ее текст:
Вот почему чтениеimport { useRef } from 'react'; export default function Counter() { let countRef = useRef(0); function handleClick() { // В таком случае ререндеринг компонента Не происходит countRef.current = countRef.current + 1; } return ( <button onClick={handleClick}>You clicked {countRef.current} times</button> ); }
ref.current
во время рендеринга приводит к ненадежному коду. Если вам это нужно, используйте вместо этого состояние.
Как работает useRef внутри?
Хотя иuseState
, и useRef
предоставляются React, в принципе useRef
может быть реализован поверх useState
. Вы можете представить, что внутри React useRef
реализован так:
Во время первого рендеринга// Внутри React function useRef(initialValue) { const [ref, unused] = useState({ current: initialValue }); return ref; }
useRef
возвращает { current: initialValue }
. Этот объект хранится в React, поэтому при следующем рендеринге будет возвращен тот же объект. Обратите внимание, что в этом примере не используется установщик состояния. В этом нет необходимости, потому что useRef
всегда должен возвращать один и тот же объект.
React предоставляет встроенную версию useRef
, потому что она достаточно распространена на практике. Но вы можете думать об этом как об обычной переменной состояния без сеттера. Если вы знакомы с объектно-ориентированным программированием, рефы могут напомнить вам поля экземпляра, но вместо this.something
вы пишете somethingRef.current
.
Когда использовать рефы?
Как правило, вы будете использовать рефы, когда вашему компоненту нужно «выйти за пределы» React и взаимодействовать с внешними API — часто API браузера, который не повлияет на внешний вид компонента. Вот несколько таких редких ситуаций:- Хранение идентификаторов таймаута
- Хранение элементов DOM и управление ими, которые мы рассмотрим в следующей части.
- Хранение других объектов, которые не нужны для вычисления JSX.
Рекомендации по использованию рефов
Следование этим принципам сделает ваши компоненты более предсказуемыми:- Относитесь к рефам как к лозейке. Рефы полезны при работе с внешними системами или API-интерфейсами браузера. Если большая часть логики вашего приложения и потока данных зависит от рефов, возможно, следует пересмотреть свой подход.
- Не читайте и не записывайте
ref.current
во время рендеринга. Если во время рендеринга требуется некоторая информация, используйте вместо этого состояние. Поскольку React не знает, когда изменяетсяref.current
, даже его чтение во время рендеринга затрудняет прогнозирование поведения вашего компонента. (Единственным исключением является такой код, как if(!ref.current) ref.current = new Thing()
, который устанавливает ссылку только один раз во время первого рендеринга.)
ref
, оно немедленно меняется:
Это связано с тем, что сам реф является обычным JavaScript объектом и ведет себя как объект. Вам также не нужно беспокоиться о том, чтобы избежать мутации, когда вы работаете с рефами. Пока объект, который вы мутируете, не используется для рендеринга, React не волнует, что вы делаете с рефом или его содержимым.ref.current = 5; console.log(ref.current); // 5
Рефы и DOM
Вы можете указать ссылку на любое значение. Однако наиболее распространенным вариантом использования ссылки является доступ к элементу DOM. Например, это удобно, если вы хотите сфокусировать инпут программно. Когда вы передаете реф в атрибутref
в JSX, например <div ref={myRef}>
, React поместит соответствующий элемент DOM в myRef.current
.
Резюме
- Рефы — это лозейка для хранения значений, которые не используются для рендеринга. Вы не будете нуждаться в них часто.
- Ссылка — это простой объект JavaScript с одним свойством, называемым
current
, которое вы можете прочитать или установить. - Вы можете попросить React дать вам реф, вызвав хук
useRef
. - Как и состояние, рефы позволяют сохранять информацию между повторными рендерингами компонента.
- В отличие от состояния, установка значения
current
рефа не вызывает повторный рендеринг. - Не читайте и не записывайте
ref.current
во время рендеринга. Это затрудняет прогнозирование вашего компонента.
SolidJS. Быстрый старт
2 года назад·7 мин. на чтение
Как быстро начать использовать SolidJS
SolidJS — это легковесная JavaScript библиотека для создания пользовательских интерфейсов. Он предоставляет модель реактивного программирования, которая позволяет разработчикам создавать динамические и эффективные приложения. В этом кратком руководстве мы рассмотрим ключевые понятия и функции SolidJS и узнаем, как начать создавать веб-приложения с использованием SolidJS.
Что такое SolidJS?
SolidJS — это декларативная UI библиотека, которая позволяет разработчикам создавать высокопроизводительные веб-приложения с помощью JavaScript. Он следует принципам реактивного программирования, когда компоненты пользовательского интерфейса реагируют на изменения в данных и автоматически обновляются. SolidJS вдохновлен такими библиотеками, как React и Svelte, но нацелен на предоставление более простой и эффективной модели программирования.Установка SolidJS
Чтобы начать работу с SolidJS, вы можете включить библиотеку в свой проект с помощью менеджера пакетов, такого как npm или yarn. Откройте терминал и выполните следующую команду:После завершения установки вы можете импортировать SolidJS в свой проект:npm install solid-js
import { createSignal } from "solid-js";
Пример Hello World
Давайте начнем с создания простого примера «Hello World» с использованием SolidJS. В этом примере мы отобразим приветственное сообщение на экране.В приведенном выше коде мы определяем функциональный компонент под названиемimport { createSignal, render } from "solid-js"; function App() { const [message, setMessage] = createSignal("Hello, World!"); return ( <div> <h1>{message()}</h1> <button onClick={() => setMessage("Hello, SolidJS!")}> Update Message </button> </div> ); } render(() => <App />, document.getElementById("app"));
App
. Внутри компонента мы используем функцию createSignal
для создания реактивного сигнала, называемого message
. Сигнал message
содержит приветственное сообщение, и мы инициализируем его значением Hello, World!
.
В коде JSX мы можем получить доступ к значению сигнала message
с помощью message()
. Это позволяет пользовательскому интерфейсу реагировать на изменения сигнала и динамически обновляться.
Обработчик событий onClick
кнопки обновляет значение сигнала message
на Hello, SolidJS!
при нажатии. Это изменение запускает повторную визуализацию компонента, и обновленное сообщение отображается на экране.
Наконец, мы используем функцию render
для рендеринга компонента App
и монтируем его к элементу DOM с идентификатором app
.
Компоненты и JSX в SolidJS
В SolidJS компоненты пользовательского интерфейса определяются как функции, возвращающие элементы JSX. JSX — это расширение синтаксиса для JavaScript, которое позволяет писать HTML-подобный код в коде JavaScript. Он обеспечивает краткий и выразительный способ описания структуры и содержимого пользовательского интерфейса. Ниже приведен пример простого компонента, который визуализирует кнопку:import { createSignal } from "solid-js"; function Button(props) { const [count, setCount] = createSignal(0); return ( <button onClick={() => setCount(count() + 1)}> {props.label} ({count()}) </button> ); }
Сигналы и реактивное программирование
Сигналы лежат в основе модели реактивного программирования SolidJS. Они представляют собой реактивные значения, которые можно считывать и обновлять. Сигналы создаются с помощью функцииcreateSignal
, которая возвращает пару значений: текущее значение сигнала и функцию для обновления значения.
Чтобы прочитать текущее значение сигнала, мы вызываем сигнал как функцию:import { createSignal } from "solid-js"; const [count, setCount] = createSignal(0);
Чтобы обновить значение сигнала, вызываем функцию обновления с новым значением:console.log(count()); // Output: 0
Сигналы можно использовать в компонентах для создания динамических пользовательских интерфейсов, которые реагируют на изменения в данных. При обновлении сигнала все компоненты, зависящие от этого сигнала, автоматически перерисовываются.setCount(10); console.log(count()); // Output: 10
Условный рендеринг
SolidJS предоставляет несколько компонентов потока управления для условного рендеринга. КомпонентShow
используется для условной визуализации части представления на основе условия.
В этом примере компонентimport { Show } from 'solid-js'; function App() { // ... return ( <div> <Show when={count() > 0}> <h2>Count is greater than 0</h2> </Show> </div> ); }
<Show>
используется для условной визуализации элемента <h2>
только в том случае, если переменная состояния count
больше 0
. Если условие выполнено, будет визуализирован элемент <h2>
; в противном случае он будет скрыт.
Списки и итерации
SolidJS предоставляет компонент<For>
для итерации массивов и рендеринга списка элементов. Давайте изменим наш компонент App
, чтобы отобразить список элементов на основе массива данных.
В этом примере мы инициализируем переменную реактивного состоянияimport { createSignal } from 'solid-js'; function App() { const [items, setItems] = createSignal([ 'Apple', 'Banana', 'Orange' ]); const addItem = () => { const newItem = prompt('Enter a new item:'); if (newItem) { setItems([...items(), newItem]); } }; const removeItem = (index) => { const updatedItems = items().filter((_, i) => i !== index); setItems(updatedItems); }; return ( <div> <ul> <For each={items()}>{(item, index) => ( <li> {item} <button onClick={() => removeItem(index)}>Remove</button> </li> )}</For> </ul> <button onClick={addItem}>Add Item</button> </div> ); } export default App;
items
помощью массива строк. Компонент <For>
используется для перебора массива items
и отрисовки элемента <li>
для каждого элемента. Мы также предоставляем параметр index
для функции обратного вызова для определения позиции каждого элемента в массиве.
Функция addItem
предлагает пользователю ввести новый элемент и добавляет его в массив items
при подтверждении. Функция removeItem
удаляет элемент из массива items
на основе его индекса.
Рефы (Refs) ссылки в SolidJS
Ссылки позволяют получать доступ к базовым элементам DOM в компонентах SolidJS и взаимодействовать с ними. Вы можете думать о ссылках как о способе получения ссылки на определенный элемент, аналогично использованиюgetElementById
в традиционном JavaScript.
SolidJS предоставляет два способа работы с рефами: с помощью переменной напрямую или с помощью функции обратного вызова.
Ссылка на основе переменной
В приведенном выше коде мы определяем переменнуюimport { createSignal, onMount } from "solid-js"; function App() { let myButton; onMount(() => { console.log(myButton); }); return ( <button ref={myButton}> Click me </button> ); }
myButton
и передаем ее в проп ref
элемента button
. Мы используем функцию onMount
для регистрации переменной myButton
после того, как компонент смонтирован и подключен к DOM.
Получив доступ к переменной myButton
, мы можем выполнять действия или получать информацию об элементе button
.
Ссылка на основе функции обратного вызова
В этом примере мы используем функцию обратного вызова для установкиimport { createSignal } from "solid-js"; function App() { const [myButton, setMyButton] = createSignal(null); const handleButtonClick = () => { console.log(myButton()); }; return ( <div> <button ref={setMyButton} onClick={handleButtonClick}> Click me </button> </div> ); }
ref
. Функция setMyButton
вызывается со ссылкой на элемент, когда компонент визуализируется и подключается к модели DOM. Затем мы можем получить доступ к ссылке на элемент в функции handleButtonClick
.
Стилизация компонента
SolidJS предоставляет различные подходы к стилизации компонентов. Вы можете использовать встроенные (inline) стили, классы CSS или библиотеки CSS-in-JS для стилизации компонентов SolidJS.Встроенные стили (inline)
В приведенном выше примере используется пропfunction App() { const [color, setColor] = createSignal("red"); return ( <div> <button style={`background-color: ${color()}`} onClick={() => setColor("blue")} > Change Color </button> </div> ); }
style
для определения встроенных стилей для элемента button
. Значением свойства style
является строка, содержащая пары CSS свойство-значение. Мы можем динамически обновлять стиль, передавая вычисленное значение в прпо style
.
CSS классы
В этом примере мы условно применяем CSS-классfunction App() { const [isActive, setIsActive] = createSignal(false); return ( <div> <button classList={{ "active": isActive()} } onClick={() => setIsActive(!isActive())} > Toggle Active </button> </div> ); }
active
к элементу button
на основе значения сигнала isActive
. Если isActive
имеет значение true
, применяется класс active
; В противном случае класс не применяется.
Обработка ошибок
Обработка ошибок является важным аспектом любого приложения, и SolidJS предоставляет функции для корректной обработки ошибок. Компонент<ErrorBoundary>
позволяет перехватывать и обрабатывать ошибки, возникающие в его дочерних компонентах.
В этом примере компонентimport { ErrorBoundary } from 'solid-js'; function ErrorComponent() { throw new Error('Something went wrong!'); } function App() { return ( <div> <h1>My App</h1> <ErrorBoundary fallback={<div>Error occurred! Please try again.</div>}> <ErrorComponent /> </ErrorBoundary> </div> ); }
<ErrorBoundary>
является оберткой компонента <ErrorComponent>
. Если в <ErrorComponent>
возникает ошибка, вместо сообщения об ошибке будет отображаться резервное содержимое, предоставленное в <ErrorBoundary>
.
Suspense
SolidJS предоставляет компонентSuspense
и возможности асинхронного рендеринга для обработки состояний загрузки и асинхронной выборки данных.
Компонент Suspense
позволяет обрабатывать состояния загрузки и резервные пользовательские интерфейсы в ожидании разрешения данных. Он работает в сочетании с функцией createEffect
для отслеживания состояния загрузки асинхронных операций.
В приведенном выше коде мы имитируем операцию выборки данных с помощью функцииimport { createEffect, createSignal } from 'solid-js'; function fetchData() { return new Promise(resolve => { setTimeout(() => { resolve('Data loaded!'); }, 2000); }); } function App() { const [data, setData] = createSignal(''); const [loading, setLoading] = createSignal(true); createEffect(async () => { setLoading(true); const result = await fetchData(); setData(result); setLoading(false); }); return ( <div> <Suspense fallback={<div>Loading...</div>}> {loading() ? ( <div>Loading...</div> ) : ( <div>{data()}</div> )} </Suspense> </div> ); }
setTimeout
. Компонент App
использует функцию createEffect
для обработки асинхронной выборки данных и соответствующим образом обновляет сигналы loading
и data
. В компоненте Suspense
мы условно визуализируем состояние загрузки или завершение получения данных на основе значения сигнала loading
.
Порталы
Порталы — это мощная функция SolidJS, которая позволяет отображать компоненты за пределами иерархии DOM их родителя. Это полезно, когда вам нужно отобразить компонент в другом элементе DOM, таком как модальное окно или всплывающая подсказка.В этом примере компонентimport { Portal } from 'solid-js/web'; function Modal() { return ( <Portal mount={document.getElementById('modal-root')}> <div className="modal">Modal Content</div> </Portal> ); }
<Portal>
визуализирует модальное содержимое внутри элемента DOM с modal-root
идентификатора, который находится за пределами иерархии DOM родительского компонента. Это позволяет разделять задачи и отображать компоненты в разных частях HTML-документа.
Контекст
Контекст — это мощная функция в SolidJS, которая позволяет обмениваться данными в дереве компонентов без явной передачи пропсов через каждый уровень. Это полезно, когда у вас есть данные, к которым требуется доступ многим компонентам вашего приложения. Для создания контекста можно использовать функциюcreateContext
:
После создания контекста можно указать значение для этого контекста с помощью компонентаimport { createContext } from "solid-js"; const MyContext = createContext();
Provider
:
Чтобы использовать значение контекста в компоненте, можно использовать хук<MyContext.Provider value={/* значение контекста */}> {/* Компоненты, которым нужен доступ к контексту */} </MyContext.Provider>
useContext
:
Обернув компоненты компонентомimport { useContext } from "solid-js"; const MyComponent = () => { const contextValue = useContext(MyContext); // Используем значение из контекста в компоненте };
Provider
, можно сделать значение контекста доступным для всех дочерних компонентов в дереве компонентов.
Контекст — это мощный инструмент для управления глобальным или общим состоянием в приложении. Это помогает сократить объем prop drilling’а и упрощает передачу данных компонентам, которые в них нуждаются.