Автор оригинала: Lekha Surasani.
Начало работы с реактивными крючками
Руководитель реагирования ввел реагированные крюки в мир в реакцию в конце в конце октября 2018 года. В начале февраля 2019 года они наконец произошли в React V16.8.0. Пока я, как и большинство других, наверное, не сможет некоторое время использовать их в производстве (пока не решили обновить React), я экспериментирую с ними на стороне.
Я на самом деле был так взволнован этим, я буду давать вступлению об этом в местной встрече. Кроме того, я буду разговаривать о крючках (и других предстоящих функциях реагирования) в WeroccitConf в Huntsville в мае! (Редактировать: Я теперь дал эти переговоры, и вы можете найти презентации и связанные с ними ресурсами на Мой сайт !) Но на данный момент вот как начать с реактивными крючками!
Реактивные крюки позволяют использовать состояние и другие функции реагирования без необходимости определения класса JavaScript. Это как возможность воспользоваться чистотой и простотой чистого компонента и Методы жизненного цикла состояния и компонента. Это потому, что крючки просто обычные функции JavaScript! Это поддается уборщику и менее Clunky Code. Сравнение по боковым сравнением того, как код выглядит с крючками и без простых подсчетных компонентов:
import './App.css';
import React, { useState } from 'react';
const HooksExample = () => {
const [counter, setCount] = useState(0);
return (
The button is pressed: { counter } times.
)
}
export default HooksExample;Nohooks.js:
import './App.css';
import React, { Component } from 'react';
export class NoHooks extends Component {
constructor(props) {
super(props;
this.state = {
counter: 0
}
}
render() {
const { counter } = this.state;
return (
The button is pressed: { counter } times.
)
}
}
export default NoHooks;Не только код намного меньше – сохраненное пространство, безусловно, добавляет для больших компонентов – это также намного больше читаемый , что является огромным преимуществом крючков. Для начинающих, которые просто начинаются с реагированными, их легче прочитать первый блок кода и легко видеть, что именно происходит. Со вторым блоком у нас есть некоторые посторонние элементы, и достаточно заставить вас остановиться и удивляться, что это за.
Еще одна замечательная вещь о крючках – это то, что вы можете создать свои собственные! Это означает, что множество государственной логики, которую мы должны были повторно написать из компонента к компоненту, теперь мы можем теперь абстрактны на пользовательский крючок – и повторно повторно Отказ
Одним из примеров, где это особенно отличается от жизни (для меня), которое приходит к уму, является использование с формами. Со всей государственной логикой форм трудно уменьшить размер компонента. Но теперь с крючками сложные формы могут стать намного проще без использования других библиотек форм.
Но прежде чем мы доберемся до этого, давайте посмотрим на крючок под рукой – umestate.
Описывается, как описано имя имени, является крюком, который позволяет вам использовать состояние в вашей функции. Мы определяем это следующим образом:
const [Соистет, UpdateState (инициация)
Давайте сломаем это:
- Соистет: Позволяет получить доступ к текущей переменной состояния, соискать
- UpdateState: Функция, которая позволяет вам обновлять состояние – все, что вы переходите в него, становится новым соискать
- инициал: Что вы хотите Сочувствовать быть при первоначальном визуализации
(Если вы не знакомы с синтаксисом разрушительной массивы, остановите здесь и читаете это .)
Теперь, когда мы понимаем основной формат устерниц и как позвонить и использовать его, давайте вернемся к примеру от ранее.
В этом примере , счетчик является государственной переменной, setcount Это функция обновления, а 0 это начальное состояние. Мы используем setcount (счетчик + 1) Чтобы увеличить количество, когда кнопка нажата, что делает Счетчик + 1 Новое значение счетчик Отказ В качестве альтернативы, если мы хотели использовать предыдущее состояние для обновления текущего состояния, мы могли бы пройти в старом состоянии для SetCount:
setcount (prevcount => prevcount + 1)
Это простой пример, который не отражает то, что мы обычно используем в реальном приложении. Но давайте посмотрим на то, что мы более склонны к использованию – простой вход в систему для электронной почты и пароль:
import './App.css';
import React, { useState } from 'react';
const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
const { handleSubmit } = this.props;
)
}
export default LoginForm;У нас есть два отдельных государственных поля и государственные программы. Это позволяет нам создавать действительно простые формы без создания целого класса JavaScript.
Если мы хотели упростить это дальше, мы могли бы создать объект как состояние. Тем не менее, umestate заменяет все состояние вместо обновления объекта (в качестве setState), поэтому мы можем реплицировать обычное поведение setstate, как показано ниже:
import './App.css';
import React, { useState } from 'react';
const LoginForm = () => {
const [login, setLogin] = useState({ email: '', password: '' });
return (
const { handleSubmit } = this.props;
)
}
export default LoginForm;Если у вас есть государственные объекты более сложным, чем это, вы бы либо захотите сломать их в отдельных состояниях, как в первом примере входа в систему или используют USERCER (мы доберемся до этого в ближайшее время!).
Итак, у нас есть штат в крючках. Как насчет методов жизненного цикла компонента?
USEFFECT – это еще один крюк, который обрабатывает компонентDIDUPDATE, ComponentDIDMount и ComponentWillunMount все в одном звонке. Если вам нужно использовать данные, например, вы можете использовать эффект, чтобы это было видно ниже.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
const HooksExample = () => {
const [data, setData] = useState();
useEffect(() => {
const fetchGithubData = async (name) => {
const result = await axios(`https://api.github.com/users/${name}/events`)
setData(result.data)
}
fetchGithubData('lsurasani')
}, [data])
return (
{data && (
data.map(item => {item.repo.name}
)
)}
)
}
export default HooksExample;Взглянув на use exeffect мы видим:
- Первый аргумент: функция. Внутри этого мы принесем наши данные, используя Async Function, а затем настроить данные Когда мы получаем результаты.
- Второй аргумент: массив, содержащий данные Отказ Это определяет, когда компонент обновляется. Как я уже упоминал ранее, Useffect работает при компонентахDidmount, ComponentWillunMount, и ComponentDidupdate будет нормально запущен. Внутри первого аргумента мы установили некоторое состояние, которое традиционно приведет к тому, что для бега. В результате используемый эффект снова запустится, если у нас не было этого массива. Теперь use exeffect будет работать на компонентеdidmount, componentWillunmount, а если данные был обновлен, компонентомdidupdate. Этот аргумент может быть пустым – вы можете выбрать пропустить пустой массив. В этом случае только ComponentDIDMount и ComponentWillunMount когда-нибудь пожар. Но вы должны указать этот аргумент, если вы устанавливаете какое-то состояние внутри него.
Для тех из вас, кто использует Redux, Userucer, вероятно, будет знакомым. Успель принимает два аргумента – A Редуктор и Первоначальное состояние Отказ Редуктор – это функция, которую вы можете определить, что принимает текущее состояние и «действие». Действие имеет тип, и редуктор использует оператор коммутатора для определения того, какой блок выполняется в зависимости от типа. Когда он находит правильный блок, он возвращает состояние, но с модификациями вы определяете в зависимости от типа. Мы можем передать этот редуктор в Useruger, а затем использовать этот крюк, как это:
const [состояние, отправка (редуктор, инициал)
Вы используете отправку, чтобы сказать, какие типы действий вы хотите выполнить, как это:
Отправка ({Тип: Имя})
Userucer обычно используется, когда вам нужно управлять сложными состояниями – таким как форма регистрации ниже.
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'firstName': {
return { ...state, firstName: action.value };
}
case 'lastName': {
return { ...state, lastName: action.value };
}
case 'email': {
return { ...state, email: action.value };
}
case 'password': {
return { ...state, password: action.value };
}
case 'confirmPassword': {
return { ...state, confirmPassword: action.value };
}
default: {
return state;
}
}
};
function SignupForm() {
const initialState = {
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
}
const [formElements, dispatch] = useReducer(reducer, initialState);
return (
dispatch({ type: firstName, value: e.target.value }) } />
dispatch({ type: lastName, value: e.target.value }) } />
dispatch({ type: email, value: e.target.value }) } />
dispatch({ type: password, value: e.target.value }) } />
dispatch({ type: confirmPassword, value: e.target.value }) } />
);
}
export default SignupForm;
Этот крючок имеет много дополнительных приложений, в том числе позволяет нам указывать несколько редукторов на нашем приложении, а затем повторно использовать их для каждого из наших компонентов, меняющихся на основе того, что происходит в этих компонентах. На высоком уровне это похоже на функциональность Redux – поэтому мы можем избежать использования Redux для относительно простых приложений.
Таким образом, мы покрыли 3 основных крючка – давайте посмотрим, как сделать наши собственные. Помните пример, который я упомянул ранее с формой входа? Вот оно снова в качестве напоминания:
import './App.css';
import React, { useState } from 'react';
const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
const { handleSubmit } = this.props;
)
}
export default LoginForm;Уменьшайте как для обоих, так и определяем структуру состояния и функцию Updater для обоих полей. Что если мы сможем упростить это дальше? Вот пользовательский крючок для обработки любых изменений входного значения (Примечание: Конвенция для именования пользовательских крючков: Используйте <Описание функции>).
import { useState } from 'react';
export const useInputValue = (initial) => {
const [value, setValue] = useState(initial)
return { value, onChange: e => setValue(e.target.value) }
}Мы используем stestate для обработки изменений, поскольку мы сделали в предыдущем примере, но на этот раз мы возвращаем значение и функцию Onchange для обновления этого значения. Итак, форма входа может теперь выглядеть так:
import React from 'react';
import { useInputValue } from './Custom'
const Form = () => {
const email = useInputValue('')
const password = useInputValue('')
return (
);
}
export default Form;Мы инициализируем UseInPutValue с пустой строкой для обоих наших полей, и установить результат на имя поля. Мы можем поставить это обратно в входной элемент, чтобы входной элемент отображал значение и функции ONChange динамически.
Теперь мы сделали эту форму еще проще – и наш пользовательский крючок можно повторно использовать везде, где нам нужен элемент ввода формы!
Я думаю, что это одно из самых полезных вещей о крючках – возможность сделать свой собственный и допустить эту ранее государственную логику, которая была заблокирована внутри каждого компонента, которая должна быть выведена и повторно использована, что позволяет каждому компоненту стать проще.
Итак, мы перешли: stuestate, use exeffect, userucer и, наконец, пользовательские крючки. Есть несколько основных вещей, которые мы еще не перешли, – а именно, два общих правила, чтобы следовать за крючками:
- Только вызовите крючки на верхний уровень – Не в петлях, вложенные функции, условия и т. Д. Это гарантирует, что крючки всегда вызываются в том же порядке после каждого визуализации. Это важно, потому что реагирование полагается на приказ, что крюки вызываются для определения того, какое состояние соответствует вызову USEState (если вы используете несколько). Если один из ваших крючков скрыт в цикле, вложенной функции или условным, заказ может измениться от рендера, чтобы рендер, во внимание, настолько, на котором соответствует состояние, в котором соответствует государству.
- Только вызовов крючки из функций raction или пользовательские крючки – Другими словами, не называйте крючки из функций JavaScript.
Надеюсь, это очищает, как и когда использовать крючки для вас! Некоторые дополнительные ресурсы вы можете взглянуть на:
Если у вас есть какие-либо вопросы/комментарии, пожалуйста, не стесняйтесь спрашивать ниже!
Оригинал: “https://www.freecodecamp.org/news/lets-get-hooked-a-quick-introduction-to-react-hooks-9e8bc3fbaeac/”