Автор оригинала: DhananjayKumar.
# React Cooks
Крючки – это новое дополнение в Реагировать 16,8 Отказ Они позволяют вам использовать состояние и другие функции реагирования без записи компонента класса.
После этого сложения функциональный компонент больше не является компонентом без гражданства. Теперь мы можем добиться поведения компонентов, используя функцию, как мы используем, чтобы иметь с круглыми циклами жизненного цикла класса, как ComponentDidmount , ComponentWillunmount , ComponentDidupdate и т. д.. Те, где обычно используют важный компонент, и мы можем достичь того же с помощью крючка с использованием использования.
Мы часто должны были поддерживать компоненты, которые начались простыми, но выросли в неуправляемый беспорядок головной логики и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут выполнять некоторые данные изготовления в компонентеDIDMount и ComponentDiDUpdate. Однако тот же метод компонента может также содержать некоторую не связанную логику, которая устанавливает слушателей событий, с выделением, выполненным в ComponentWillunmount. Взаимодействующий код, связанный с взаимосвязью, которые меняются друг от друга, но совершенно не связанный код в сочетании в одном методе. Это делает его слишком легко введенным ошибками и несоответствиями.
Во многих случаях невозможно разбить эти компоненты на меньшие, потому что государственная логика повсюду. Также сложно тестировать их. Это одна из причин, по которой многие люди предпочитают комбинировать реагировать с отдельной государственной библиотекой управления. Однако это часто вводит слишком много абстракции, требует, чтобы вы перепрыгнули между разными файлами и затрудняют использование компонентов повторного использования.
Чтобы решить это, крючки позволяют разделить один компонент на более мелкие функции на основе того, какие части связаны (такие как настройка данных подписки или выборов), а не принуждение к разделению на основе методов жизненного цикла. Вы также можете выбрать локальное состояние компонента с редуктором, чтобы сделать его более предсказуемым. Ниже представлены списки крючков, которые были добавлены –
Основные крючки
- stestate.
- useffect.
- упреждающий текст
Дополнительные крючки
- UseCallback
- УСЭММО
- Увенчар
- УСЭРЕФ
- UseimpratationHandle.
- Uselayouteffect.
- Useebugvalue.
stestate.
Возвращает значение состояния и функцию обновления его. Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передавать функцию для настройки или обновленного значения. В случае функции – это получит предыдущее значение и возвращает обновленное значение. Вот пример счетчика компонента, который использует обе формы setState:
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
);
}
Давайте конвертируем классный компонент в функциональный компонент, чтобы отправить имя имя в форме. Ниже приведен компонент класса пользователей.
import React, { Component } from "react";
class UserForm extends Component {
constructor(props) {
super(props);
this.state = {
firstName: "",
lastName: ""
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
render() {
const { firstName, lastName } = this.state;
return (
);
}
}
export default UserForm;
Эквивалентный функциональный компонент для компонента вышеуказанного класса может быть написан как ниже –
import React, { useState } from "react";
import "./styles.css";
function UserForm() {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
return (
);
}
export default UserForm;
Мы в основном объявляем государственную переменную и функцию, чтобы позволить нам изменять переменную состояния позже. Пустая строка в вызове stateState является начальное значение имени и может быть установлено на любое необходимое значение. Мы настроим это в пустую строку сейчас. Обратите внимание, что вы можете назвать функцию setfirstname, что вы хотите. Однако это конвенция, чтобы добавить «установить» до имени переменной состояния, которую мы модифицируем.
useffect.
SOWEFFECT предназначен для обработки любого типа «побочного эффекта» (внесение изменений в некоторой внешней системе, введя на консоль, делая HTTP-запрос и т. Д…), которое запускается изменением данных вашего компонента или в реакции на рендеринг компонента. Он заменяет ComponentDIDMount, ComponentDidunmount и ComponentDidreceiveProops или некоторый код, который запускается в любое время, когда ваши изменения в вашем состоянии. Может быть сложно понять нюансы его использования, но понимая, когда он работает и как контролировать это, он может немного легче обернуть голову.
Запустите эффект на каждом визуализации
import React, { useState, useEffect } from "react";
default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`The count is ${count}`);
});
return (
Count is {count}
);
}
Запустите эффект только один раз
Допустим, мы только хотели, чтобы эффект пройти один раз … Подумайте об этом как замену для компонентаDIDMount. Чтобы сделать это, пропустите [] как 2-й аргумент к Use Effect:
import React, { useEffect } from "react";
default function Mounted() {
useEffect(() => {
console.log("mounted");
}, []);
return This component has been mounted.;
}
Запустите эффект, когда изменения данных
Если то, что вы действительно хотите, это запустить эффект только тогда, когда конкретное значение изменения … скажем, чтобы обновить медовое хранилище или запустить HTTP-запрос, вы захотите пройти эти значения, которые вы смотрите за изменения в качестве 2-го аргумента. Этот пример напишет имя пользователя на локальное хранилище после каждого обновления (срабатывается на Onchange ввода).
import React, { useState, useEffect } from "react";
default function Listen() {
const [name, setName] = useState("");
useEffect(
() => {
localStorage.setItem("name", name);
},
[name]
);
return (
{
setName(e.target.value);
}}
value={name}
/>
);
}
Уборка от вашего эффекта
Иногда вам нужно отменить то, что вы сделали … чтобы убрать после себя, когда компонент должен быть размонтирован. Для достижения этого вы можете вернуть функцию из функции, передаваемой в USEFFECT … Это ползность, но давайте увидим реальный пример, о том, что будет как компонентом, так и компоненты.
import React, { useEffect } from "react";
default function Listen() {
useEffect(() => {
const listener = () => {
console.log("I have been resized");
};
window.addEventListener("resize", listener);
return () => {
window.removeEventListener("resize", listener);
};
}, []);
return resize me;
}
Избегайте установки состояния на размонтированных компонентах
Поскольку эффекты выполняются после того, как компонент завершил рендуринг, и потому что они часто содержат асинхронный код, возможно, к тому времени, когда асинхронный код разрешается, компонент больше не монтируется! Когда оно оно опускается для вызова функции SetData для обновления состояния, вы получите ошибку, которую вы не можете обновить состояние в размонтированном компоненте.
То, как мы можем решить заявленную (без канатуировки) выпуска выше, связано с использованием локальной переменной и используя преимущества функции «Cleanup», возвращаемой из нашей функции эффекта. Запустив его как True, мы можем переключить его ложь, когда эффект очищен, и используйте эту переменную, чтобы определить, все ли мы хотим вызвать функцию SetData или нет.
import React, { useState, useEffect } from "react";
import Axios from "axios";
default function Fetcher({ url }) {
const [data, setData] = useState(null);
useEffect(
() => {
// Start it off by assuming the component is still mounted
let mounted = true;
const loadData = async () => {
const response = await Axios.get(url);
// We have a response, but let's first check if component is still mounted
if (mounted) {
setData(response.data);
}
};
loadData();
return () => {
// When cleanup is called, toggle the mounted variable to false
mounted = false;
};
},
[url]
);
if (!data) {
return Loading data from {url};
}
return {JSON.stringify(data)};
}
упреждающий текст
Успецитник делает контекст немного легче потреблять. Типичный способ использовать контекст API выглядит так:
import React from "react";
import ReactDOM from "react-dom";
// Create a Context
const NumberContext = React.createContext();
// It returns an object with 2 values:
// { Provider, Consumer }
function App() {
// Use the Provider to make a value available to all
// children and grandchildren
return (
);
}
function Display() {
// Use the Consumer to grab the value from context
// Notice this component didn't get any props!
return (
{value => The answer is {value}.}
);
}
ReactDOM.render(Посмотрите, как мы получаем значение внутри компонента дисплея? Мы должны обернуть наш контент в onscontext.Consumer и используйте шаблон рендеринга реквизита – передача функции в детстве – для получения значения и отображения его.
Это работает нормально, и «рендеринг реквизиты» – отличный шаблон для передачи динамических данных, но он вносит некоторое ненужное вложение и некоторые познавательные накладные расходы (особенно если вы не привыкли к этому).
Давайте переписаним дисплей с помощью нового крючка USEContext и посмотрите, как выглядит:
// import useContext (or we could write React.useContext)
import React, { useContext } from 'react';
// ...
function Display() {
const value = useContext(NumberContext);
return The answer is {value}.;
}
UseCallback VS USEMEMO.
APISECALLBACK и USEMEMO выглядят похожими. Они оба принимают функцию и массив зависимостей.
useCallback(fn, deps); useMemo(fn, deps);
Так какая разница? USECallback возвращает свою функцию безразрешенной, чтобы вы могли назвать его позже, а USEMEMO вызывает свою функцию и возвращает результат.
Вы хотите использовать USEFALLBACK или USEMEMO, когда вы зависите от Ссылочное равенство между рендерами. В функциях RACT, определенные в функциональных компонентах, повторно создаются на каждом визуализации из-за закрытия. И, следовательно, если вы используете функцию в качестве зависимости в случае с использованием, это приведет к бесконечному циклам. Итак, чтобы избежать этого, мы должны использовать USECallback. Ниже приведен отличный пост, объясняющий значение референциального равенства, подчеркивая разницу между UseCallback-VS-Usememo Отказ