Публикации по теме 'hooks'
3. асинхронные состояния: исходный объект
Этот волшебный объект запечатывает внутреннюю реализацию библиотеки, чтобы разработчики не могли с ней связываться. В этом посте мы узнаем больше об исходном объекте.
Этот пост является частью следующей серии постов в блоге:
async-states: библиотека управления состоянием асинхронные состояния: использование реакции асинхронные состояния: исходный объект асинхронные состояния: производитель асинхронные состояния: расширенные концепции асинхронные состояния: vs...
Реагировать. Слишком много крючков портят суп - почему крючки плохие ...
Хотя не для того, чтобы полностью их сбрасывать со счетов, цель этого сообщения - подчеркнуть недостатки React Hooks. Крючки славятся своей простотой и удобством многократного использования, но они не бесплатны. Я не добавлял никаких примеров кода, но я намерен выявить потенциальные проблемы, которые читатель, как новичок, так и опытный разработчик, может идентифицировать в своем собственном коде. Мы часто воспринимаем наши коды как должное и недостаточно критично относимся к ним...
Основы использования useState
Одна из лучших особенностей React — возможность использовать хуки, useState — одна из них и, возможно, одна из самых важных. Причина, по которой useState так полезна, заключается в том, что она позволяет вам создать переменную состояния и специальную функцию, которая может обновлять состояние этой переменной в любой момент ее вызова; после объявления вы также можете присвоить ему состояние по умолчанию.
Прежде чем делать что-либо из этого, вы должны сначала импортировать useState в свой..
Реагировать на жизненные циклы с помощью useEffect
В React методы жизненного цикла традиционно использовались в компонентах класса для выполнения действий на определенных этапах жизненного цикла компонента, например, при его монтировании, обновлении или размонтировании. Однако с введением React Hooks теперь вы можете использовать функциональные компоненты и достигать аналогичной функциональности с помощью встроенных хуков.
Традиционные жизненные циклы React
Прежде чем погрузиться в хуки, давайте кратко рассмотрим традиционные..
Крючки React : useRef и forwardRef
Привет, это снова я! Сегодня я покажу вам useRef hook и forwardRef в реакции. Итак, начнем с хука useRef.
useRef предоставляет ссылку на конкретный элемент, и вы можете получить к нему доступ, используя эту ссылку. Что это значит? Например, когда у нас есть элементы формы и нам нужно сослаться на эти элементы, чтобы либо вывести их значение, либо сфокусировать эти элементы и т. д. . Давайте начнем с примера, чтобы было понятнее.
Итак, это форма, в которую мы вводим..
[React] используйте внешнюю функцию для onClick
Примечание для общей ошибки
Чтобы добиться ясности кода, мы всегда комбинируем одни и те же функции
import { useState } from 'react'
...
const [count, setCount] = useState (5)
...
<div onClick = { () => setCount ( count +1 ) } /> // count +1
<div onClick = { () => setCount ( count -1 ) } /> // count -1
Теперь я извлекаю () => setCount ( count +1 ) как внешнюю функцию, точно так же:
import { useState } from 'react'
...
const [count, setCount] = useState..
Выявление асинхронных ошибок в React с использованием границ ошибок
React 16.0 представил Границы ошибок .
Границы ошибок - это компоненты React, которые перехватывают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс вместо дерева компонентов, в котором произошел сбой.
Возьмем этот пример:
Если мы запустим этот код, ErrorBoundary перехватит ошибку, отобразит резервный пользовательский интерфейс ( Something went wrong ) и запишет ошибку в консоль...
