Автор оригинала: FreeCodeCamp Community Member.
Существует много важных концепций и уроков, которые реагируют, что разработчики должны знать, что просто не покрывается большинством учебных пособий.
Я вернул темы, которые я считаю, это некоторые из самых важных для вас, но эти немногие статьи посвятили время, чтобы подробно описать.
Давайте посмотрим на пять ключевых уроков реагирования, которые стоит знать, что вы можете не найти в другом месте.
1. Как реагируту на самом деле обновляется
Как разработчик реагирования, вы знаете, что состояние может быть создано и обновлено с Уместите и Успеведщик крючки.
Но что именно происходит, когда вы обновляете состояние компонента с любым из этих крючков? Государство обновляется немедленно или это сделано в течение нескольких позже?
Давайте посмотрим на следующий код, который является очень простым счетным приложением. Как вы ожидаете, вы можете нажать на кнопку, и наш счетчик увеличивается на 1.
import React from 'react';
export default function App() {
const [count, setCount] = React.useState(0)
function addOne() {
setCount(count + 1);
}
return (
Count: {count}
{/* 1 (as we expect) */}
);
}Но что, если мы попытаемся добавить дополнительную строку, которая также обновляет наш счет за другим – что вы думаете, что произойдет?
Когда вы нажимаете на кнопку, будет увеличить наше отображение на один или два?
import React from 'react';
export default function App() {
const [count, setCount] = React.useState(0)
function addOne() {
setCount(count + 1);
setCount(count + 1);
}
return (
Count: {count}
{/* 1?! */}
);
}Если мы запустим этот код, мы видим, что он увеличивается только одним! Несмотря на попытка увеличить количество на один дважды, с двумя отдельными обновлениями состояния.
Почему наш счетчик отображает 1, несмотря на четко увеличение состояния на 1 два раза?
Причина этого заключается в том, что реакцию расписание состояния обновления, которое будет выполнено, когда мы обновляем указать сначала. Потому что это просто запланировано и не выполняется немедленно (асинхронный и не синхронно), наш Считать Переменная не обновляется, прежде чем мы попытаемся обновить его во второй раз.
Другими словами, потому что государственное обновление запланировано, не выполняется немедленно, во второй раз мы позвонили setcount , Считать все еще просто 0 , не 1 Отказ
Способ того, что мы можем исправить это, чтобы надежно обновить состояние, несмотря на то, что обновления состояния являются асинхронными, состоит в том, чтобы использовать внутреннюю функцию, доступную в рамках Уместите Функция сеттера.
Это позволяет нам получить предыдущее состояние и вернуть значение, которое мы хотим, чтобы он был в теле внутренней функции. Когда мы используем этот шаблон, мы видим, что он увеличивается двумя, как мы изначально хотели:
import React from 'react';
export default function App() {
const [count, setCount] = React.useState(0)
function addOne() {
setCount(prevCount => prevCount + 1); // 1
setCount(prevCount => prevCount + 1); // 2
}
return (
Count: {count}
);
}2. Лучше использовать несколько эффектов вместо одного
При выполнении побочного эффекта большинство разработчиков реагирования будут Useffect только один раз и попытайтесь выполнить несколько побочных эффектов в зависимости от одинакового эффекта.
На что это похоже? Ниже вы можете увидеть, где мы выбираем данные, так и комментарий данные в одном крючке с эффектом использования в их соответствующих переменных состояния:
import React from "react";
export default function App() {
const [posts, setPosts] = React.useState([]);
const [comments, setComments] = React.useState([]);
React.useEffect(() => {
// fetching post data
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setPosts(data));
// fetching comments data
fetch("https://jsonplaceholder.typicode.com/comments")
.then((res) => res.json())
.then((data) => setComments(data));
}, []);
return (
Вместо того, чтобы попытаться помнить все ваши побочные эффекты в один эффект крючком, так же, как вы можете использовать сложный крючок более одного раза, вы можете использовать несколько эффектов.
Это позволяет нам разделять наши различные действия в различные эффекты для лучшего разделения проблем.
Лучшее отделение проблем является серьезным преимуществом, которое реагирующие крюки обеспечивают по сравнению с использованием методов жизненного цикла в классовых компонентах.
В методах, таких как ComponentDidmount Например, необходимо было включить какие-либо действия, которые мы хотим выполнять после установки нашего компонента. Вы не смогли разбить свои побочные эффекты на несколько методов – каждый метод жизненного цикла в классах может использоваться один раз и только один раз.
Основная выгода от реактивных крючков заключается в том, что мы можем разбить наш код на основе того, что он делает. Мы можем не только разделить действия, которые мы выполняем после рендеринга на несколько эффектов, но мы также можем совместно найти наше состояние:
import React from "react";
export default function App() {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setPosts(data));
}, []);
const [comments, setComments] = React.useState([]);
React.useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/comments")
.then((res) => res.json())
.then((data) => setComments(data));
}, []);
return (
Это означает, что мы можем поставить гостевой крюк с эффектом крюка, который оно связано с. Это помогает организовать наш код намного лучше и лучше понять, что он делает с первого взгляда.
3. Не оптимизируйте функции, которые обновляют состояние (Usestate, Userucer)
Общая задача всякий раз, когда мы передаем функцию обратного вызова из родительского компонента к дочерним компоненте, заключается в том, чтобы предотвратить его воссоздание, если его аргументы не изменились.
Мы можем выполнить эту оптимизацию с помощью UseCallback крюк.
USECallback был создан специально для функций обратного вызова, которая передается дочерним компонентам, чтобы убедиться, что они не воссозданы без необходимости, что подразумевает попадание производительности на наших компонентах всякий раз, когда есть переназначение.
Это связано с тем, что всякий раз, когда наш родительский компонент повторно рендерирует, он приведет к восстановинию всех дочерних компонентов. Это то, что приводит к созданию наших функций обратного вызова на каждом повторном рендере.
Однако, если мы используем функцию настройки для обновления состояния, которую мы создали с помощью крючков USESTATE или USERCER, нам не нужно обернуть это с помощью USECallback.
Другими словами, нет необходимости делать это:
import React from "react";
export default function App() {
const [text, setText] = React.useState("")
// Don't wrap setText in useCallback (it won't change as is)
const handleSetText = React.useCallback((event) => {
setText(event.target.value);
}, [])
return (
);
}
function Input({ text, handleSetText }) {
return(
)
}Причина приходит непосредственно из документации по реагированию:
Следовательно, нам не только не нужно оптимизировать его излишне с помощью упрека.
Это важно отметить, что во многих случаях он может сократить код, который нам нужно использовать. И самое главное, это непродуктивная попытка оптимизировать ваш код, поскольку он может понести свои проблемы с производительностью.
4. Крюк USEREF может сохранить состояние между рендерами
В качестве разработчиков реагирования, иногда очень полезно иметь возможность ссылаться на данный реактивный элемент с помощью Ref. Мы создаем Refs в реакции с помощью УСЭРЕФ крюк.
Важно отметить, однако, что УСЭРЕФ не просто полезно для ссылки на определенный элемент DOM. Документация по реагированию говорит сама по себе:
Существуют определенные преимущества для хранения и обновления значений с УСЭРЕФ Отказ Это позволяет нам хранить значение, которое не будет в памяти, которые не будут удалены по рендеры.
Если мы хотели отслеживать ценность через рендеры с помощью простой переменной, она будет ранициализирована каждый раз, когда компонент отображает. Однако, если вы используете REF, значение, хранящееся в нем, останется постоянным через рендеры вашего компонента.
Что такое корпус для использования для используя УСЭРЕФ?
Это может быть полезно в том случае, если мы хотели выполнить данный побочный эффект на первоначальном визуализации только, например:
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
const ref = React.useRef({ hasRendered: false });
React.useEffect(() => {
if (!ref.current.hasRendered) {
ref.current.hasRendered = true;
console.log("perform action only once!");
}
}, []);
return (
);
}Попробуйте запустить этот код самостоятельно.
Как вы увидите, независимо от того, сколько раз нажата кнопка, состояние обновляется, а повторное отображение происходит, действие, которое мы хотим выполнить (см. Console.log ) выполняется только один раз.
5. Как предотвратить управление приложением React React
Один из самых важных уроков для разработчиков реагирования на то, чтобы узнать, особенно если они не подтолкнули приложение React в Интернете, – это то, что делать с неосторожными ошибками.
В приведенном ниже примере мы пытаемся отобразить компонент заголовка в нашем приложении, но выполняет действие, которое приводит к ошибке. А именно, пытаясь получить недвижимость от нулевой стоимости:
import React from "react";
export default function App() {
return (
<>
Hello {user.name}
; // error!
}Если мы нажимаем этот код до производства, мы увидим пустой экран точно так:
Почему мы ничего не видим?
Опять же, мы можем найти ответ на это в рамках документации по реагированию:
Хотя в разработке вы видите большое красное сообщение об ошибке со стоком трассировкой, который говорит вам, где можно найти ошибку. Однако, когда ваше приложение будет жить, вы просто посмотрите пустой экран.
Это не желаемое поведение, которое вы хотите для вашего приложения.
Но есть способ исправить это или, по крайней мере, покажу своих пользователей то, что говорит им, что произошла ошибка, если приложение случайно вылетает. Вы можете обернуть дерево компонента в том, что называется границей ошибки.
Границы ошибок – это компоненты, которые позволяют нам ловить ошибки и показать пользователям последующее сообщение, которое говорит им, что что-то произошло не так. Это может включать инструкции о том, как уволить ошибку (например, перезагрузка страницы).
Мы можем использовать границу ошибки с помощью пакета React - ошибка-граница Отказ Мы можем обернуть его вокруг компонента, по которому мы считаем, что ошибка. Это также может быть обернуто вокруг нашего дерева компонентов приложения:
import React from "react";
import { ErrorBoundary } from "react-error-boundary";
export default function App() {
return (
);
}
function Header() {
const user = null;
return Hello {user.name}
;
}
function ErrorFallback({ error }) {
return (
Oops, there was an error:
{error.message}
);
}Вы также можете отобразить сообщение об ошибке, однако вам нравится и стиль, как будто вы бы обычный компонент.
Результат, когда мы получаем, когда произойдет ошибка, намного лучше:
Наслаждайтесь этим постом? Присоединяйтесь к React BootCamp
React Bootcamp Занимает все, что вы должны знать о изучении реагирования и связки в один комплексный пакет, включая видео, обманывать, плюс специальные бонусы.
Получить инсайдерскую информацию сотни разработчиков уже использовалось для освоения реагирования, находить работу своей мечты и контролировать свое будущее:
Нажмите здесь, чтобы быть уведомленным, когда он открывается