| // Приведенная ниже функция memoize() сохраняет результаты каждого вызова принимаемой функции в виде [ключ:значение]. | |
| // Функция, генерирующая ключ исходя из параметров | |
| const generateKey = args => ( | |
| args.map(x => `${x.toString()}:${typeof(x)}`).join('|') // Результат: "x1:number|x2:number|..." | |
| ); | |
| // Принимает функцию в качестве параметра | |
| const memoize = fn => { | |
| const cache = {}; |
| /* WORKS */ | |
| a:hover{ color: red; } | |
| a:active{ color: green; } | |
| /* NOT WORKS */ | |
| a:active{ color: green; } | |
| a:hover{ color: red; } |
| A lot of the solutions don't work inline. This is a cleaned-up solution offered by @AlekseyBykov using Google App Scripts to add a custom menu action: | |
| Create a new script (Tools > Script Editor) | |
| Copy the following code into the editor: | |
| // Add new menu item | |
| function onOpen() { | |
| DocumentApp.getUi() | |
| .createMenu('Styles') | |
| .addItem('Format Code', 'formatCode') | |
| .addToUi(); |
В React есть два базовых правила использования хуков, которые обязательно нужно соблюдать:
function checkAuth() {
// Нарушено второе правило!
Хуки создаются для того, чтобы можно было разделять одинаковое поведение между разными компонентами. Они работают гораздо очевиднее, чем компоненты высшего порядка или рендер-пропсы, которые нам приходилось использовать раньше.
React позволяет создавать кастомные хуки – и это очень здорово!
// создаем хук для получения данных из API
function useAPI(endpoint) {
const [value, setValue] = React.useState([]);
Редьюсеры (или редукторы) – это простые чистые (предсказуемые) функции, которые получают в качестве аргументов предыдущее состояние объекта и объект действия (action), а возвращают обновленное состояние. Другими словами, редьюсеры применяют к состоянию некоторое действие.
function reducer(state, action) {
// действия редьюсера зависят от типа действия (экшена)
switch (action.type) {
// если action.type равен 'LOGIN'
case "LOGIN":
В React существует проблема передачи свойств целевым компонентам. Обычно мы поднимаем данные по дереву компонентов, чтобы хранить их в одном месте. Но затем их приходится спускать вниз по цепочке пропсов для вывода на страницу. Иногда несколько уровней компонентов просто передают вниз ненужные им данные. чтобы они достигли цели.
function App() {
// храним данные пользователя в App
// но выводим в Header
const [user] = React.useState({ name: "Fred" });
Pефы – это специальные атрибуты, доступные всем React-компонентам. Они позволяют создать ссылку на компонент (или HTML-элемент) после того, как он появится в DOM.
Хук useRef – это простой способ создавать рифы внутри функциональных компонентов. Он возвращает значение, которое можно привязать к любому элементу, чтобы на него можно было ссылаться.
С помощью такой ссылки можно изменять свойства элемент или вызывать его общедоступные методы (например, focus() у поля ввода).
function App() {
Хук useMemo очень похож на useCallback и также используется для повышения производительности. Разница заключается в том, что вместо функций-коллбэков useMemo запоминает результаты дорогостоящих вычислений.
Если некоторая операция при одних и тех же входных данных всегда возвращает один и тот же результат, его можно поставить в соответствие этим данным и запомнить. Таким образом, в следующий раз не придется производить само вычисление. Достаточно будет взять сохраненный результат, соответствующий входным данным.
Хук useMemo возвращает результат вычисления.
function App() {
Хук useCallback используется для улучшения производительности компонентов за счет мемоизации функций обратного вызова.
При частом обновлении постоянное пересоздание обработчиков – это дорогое удовольствие. useCallback позволяет изменять их только в случае реальной необходимости – когда изменяются связанные с ними зависимости.
// В таймере мы постоянно пересчитываем дату
// при этом компонент каждый раз рендерится заново
// инкрементный счетчик при этом не увеличивается,