A-Level. React. Advanced.

React. Advanced.

Теми

1. Ref, Forward ref
2. Portal
3. Context

Refs & DOM

Рефи дають можливість отримати доступ до DOM-елементів або React-елементів, створених у методі рендеру.

• Керування фокусом, виділення тексту або відтворення медіа.
• Аніміції.
• Інтеграція з сторонніми DOM-бібліотеками.

useRef

            import React, { useRef } from 'react';
             
            const Component = () => {
              const newTaskRef = useRef(null);
              const someEventHandler = () => newTaskRef.current.focus()
             
              return (
                <input placeholder='new task' ref={newTaskRef}/>
              )
            }
        

forwardRef

• Перенаправлення рефів дозволяє автоматично передавати реф компонента одному з його дочірніх елементів.
• Перенаправлення рефів дозволяє взяти ref з атрибутів компонента та передати («перенаправити») його одному з дочірніх компонентів.
• Другий аргумент ref існує тільки в тому випадку, якщо ви створюєте компонент через функцію React.forwardRef.
• ref це не проп (як і key, React обробляє ref особливим чином).

forwardRef

            // some/path/to/OurComponents.js
            const OurComponents.js = {
              const newTaskRef = React.useRef(null);
              return (<CustomInput placeholder='new task' ref={newTaskRef}/>)
            }
             
            // src/ui/Input.js
            const Input = React.forwardRef((props, ref) => (
              <input type="text" ref={ref} {...props} />
            ))
        

Portal

Портали дозволяють рендерити дочірні елементи в DOM-елемент, який знаходиться поза DOM-ієрархією батьківського компонента.

Застосування порталів: діалогові вікна, спливаючі картки та спливаючі підказки. (тобто, коли в батьківському компоненті задані стилі. overflow: hidden або z-index, але вам потрібно, щоб дочірній елемент візуально виходив за межі свого контейнера).

Portal

            import ReactDOM from 'react-dom';
             
            {ReactDOM.createPortal(
              <Modal {...{ onClose, onDone }}/>,
              document.getElementById('modal-root')
            )}
        

Context

Контекст дозволяє передавати дані через дерево компонентів без необхідності передавати пропси на проміжних рівнях (наприклад: UI-тема або вибрана мова).

Зазвичай контекст використовується, якщо необхідно забезпечити доступ до даних у багатьох компонентах на різних рівнях вкладеності.

createContext

            const ThemeContext = createContext('light');
        

Коли React рендерить компонент, який підписаний на цей об'єкт, React отримає поточне значення контексту з найближчого відповідного Provider вище в дереві компонентів.

Якщо Provider не буде знайдений, то використовується defaultValue.

Context.Provider

Context використовується разом з компонентом Provider, який дозволяє дочірнім компонентам, що використовують цей контекст, підписатися на його зміни.

value - обов'язковий проп, який буде переданий у всі компоненти, що використовують контекст.

Context.Provider

Всі споживачі, які є нащадками Provider, будуть повторно рендеритись, як тільки проп value у Provider зміниться.

            <ThemeContext.Provider value='dark'>
              <App/>
            </ThemeContext.Provider>
        

Context.Consumer

Consumer - компонент, який підписується на зміни контексту.

Ця функція приймає поточне значення контексту (тобто проп value найближчого компонента Provider або defaultValue, якщо Provider не знайдений) і повертає React-компонент.

            <ThemeContext.Consumer>
              {(themeCtx) => { ... }}
            </ThemeContext.Consumer>
        

useContext

useContext - приймає об'єкт контексту і повертає поточне значення контексту для цього контексту.

            import React, { useContext } from 'react';
            import ThemeContext from '../../context/theme';
             
            const themeCtx = useContext(ThemeContext);
        

Task 1.

1. Прикрутити до todo вибір теми.

Links

• Контекст
• Refs
• Portals