Close

15 июня, 2021

Что такое React Hooks и какие проблемы они решают

1. Элементарные компоненты — эти компоненты являются простейшими, они характеризуются тем, что являются простыми переменными, которые хранят определенное выражение JSX, поэтому они не получают свойств и не имеют состояния, хотя они могут использовать любой оператор как обычно, например:

JavaScript
const componentname = list.length > 1 ?
[
<li className=»my-class»>{list[0]}</li>,
<li className=»my-class»>{list[1]}</li>
]
:
null;

1234567 const componentname = list.length > 1 ?            [                  <li className=»my-class»>{list[0]}</li>,                  <li className=»my-class»>{list[1]}</li>            ]         :         null;

Этот массив, введенный в тег JSX <ul>, отобразит список в нашей DOM.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

2. Функциональные компоненты. В до-хуковскую эру эти компоненты в основном использовались для изоляции потенциально повторно используемых функций, но с дополнительной логикой, не зависящей от их состояния, поскольку функциональные компоненты получали свойства, но не обладали состоянием. Примером функционального компонента может быть:

JavaScript
function MyComponent(props) {
return <h1>This component returns: {props.value}</h1>
}
// We can render it directly
const myComponent = <MyComponent value=»Exactly this»/>
ReactDOM.render(
myComponent,
document.getElementById(‘root’)
);

123456789 function MyComponent(props) {    return <h1>This component returns: {props.value}</h1>}// We can render it directlyconst myComponent = <MyComponent value=»Exactly this»/>ReactDOM.render(    myComponent,    document.getElementById(‘root’));

3. Компоненты класса — это всегда были наиболее распространенные компоненты в разработке React, потому что они были единственными со свойствами, состоянием и жизненным циклом, что делало их необходимыми для управления основной логикой и циклом приложения. Самый простой пример компонента класса с состоянием и с некоторым жизненным циклом:

JavaScript
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: »
}
}
componentDidMount() {
this.setState({ value: ‘This one’ })
}
render() {
const { value } = this.state;
return <h1>This component returns: {value}</h1>
}
}

123456789101112131415 class MyComponent extends React.Component {                constructor(props) {                    super(props);                    this.state = {                        value: »                    }                }                componentDidMount() {                           this.setState({ value: ‘This one’ })                }                render() {                    const { value } = this.state;                    return <h1>This component returns: {value}</h1>                }      }

Однако эти предположения оказались устаревшими, когда React представил хуки в 2018 году, обещая новый способ работы, основанный на функциональных компонентах с доступом к состоянию и жизненному циклу.

Что такое хук?

Хук — это функция javascript, которая позволяет создавать / получать доступ к состоянию и жизненным циклам React, и которая для обеспечения стабильности приложения должна использоваться в соответствии с двумя основными правилами:

Должна вызываться на верхнем уровне приложения — хук никогда не должен вызываться внутри циклов, условных выражений или вложенных функций, поскольку порядок вызова хуков всегда должен быть одинаковым, чтобы гарантировать предсказуемость результата во время рендеринга. Использование только верхнего уровня — это то, что гарантирует, что внутреннее состояние React правильно сохраняется между разными вызовами одного и того же хука.

Должен вызываться в функциях или других пользовательских обработчиках React — хук никогда не должен вызываться вне функции React или другого пользовательского обработчика, чтобы логика состояния компонента была четко видна из остальной части кода для области, установленной React.

Как мы видели в предыдущем разделе, функциональный компонент до React 16.8 не мог иметь состояния или жизненного цикла, поэтому единственный способ создать, например, простой аккумулятор:

JavaScript
class Acumulador extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
render() {
const { count } = this.state;
return (
<h1>The button has been clicked { count } times</h1>
<button onClick={() => this.setState({count: count + 1})}>Click me</button> )
}
}

1234567891011121314 class Acumulador extends React.Component {                     constructor(props) {                              super(props);                              this.state = {                                  count: 0                              }                     }                        render() {                            const { count } = this.state;                            return (                                     <h1>The button has been clicked { count } times</h1>                                     <button onClick={() => this.setState({count: count + 1})}>Click me</button>                       )                        }                 }

Однако благодаря хукам мы теперь можем реплицировать этот компонент, добавляя состояние с использованием useState, так что функция предыдущего аккумулятора будет:

JavaScript
function Acumulador(props) {
const [count, setCount] = useState(0);
return (
<h1>The button has been clicked { count } times</h1>
<button onClick={() => setCount(count => count + 1)}>Click me</button>
);
}

1234567 function Acumulador(props) {               const [count, setCount] = useState(0);               return (                     <h1>The button has been clicked  { count } times</h1>                     <button onClick={() => setCount(count => count + 1)}>Click me</button>                 );        }

Хуки в React

Поскольку конечная цель хуков — упростить реальную логику, React предоставляет сокращенный набор с гибкостью, позволяющей реагировать на различные ситуации в жизненном цикле приложения, а также с возможностью создавать свои собственные.

Базовые хуки

React предоставляет три основных хука, которые отвечают обычным потребностям реализации жизненного цикла в компоненте класса.

Хук состояния useState

Этот хук возвращает значение с поддерживаемым состоянием и функцию, которая необходима для его обновления:

JavaScript
const [count, setCount] = useState(0)

1 const [count, setCount] = useState(0)

Начальное состояние — это параметр, переданный в useState, в данном случае 0, и это будет состояние, по крайней мере, во время начального рендеринга и до тех пор, пока функция setCount не будет вызвана с новым значением, так что в этом случае, например, значение setCount(count + 1) будет увеличиваться, став 1 в следующем рендеринге.

Также можно использовать значение предыдущего состояния в самой функции установки состояния, поэтому приведенное выше также можно записать как setCount(count => count + 1).

Хук эффекта useEffect

Этот хук позволяет нам добавлять побочные эффекты к заданному функциональному компоненту, то есть он позволяет нам вносить изменения в нашу логику после выполнения рендеринга таким же образом, как методы жизненного цикла компонентов класса componentDidMount, componentDidUpdate и componentWillUnmount.

Одно из больших преимуществ этого хука состоит в том, что он упрощает жизненный цикл, так что три доступных метода класса могут быть выражены с использованием только этого хука. Например, в случае компонента класса, который загружает набор данных из файла cookie при монтировании и записывает его при размонтировании, мы могли бы написать его так:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас! JavaScript
class LoadUnload extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
}
}
componentDidMount() {
// theoretical function that returns cookie data as a js object
const loadedData = getCookie(‘data’);
this.setState({data: loadedData})
}
componentWillUnmount() {
const { data } = this.state;
// Theoretical function that saves the data object in JSON format
setCookie(data);
}
}

123456789101112131415161718 class LoadUnload extends React.Component {             constructor(props) {                    super(props);                    this.state = {                         data: null                    }             }             componentDidMount() {                    // theoretical function that returns cookie data as a js object                    const loadedData = getCookie(‘data’);                    this.setState({data: loadedData})             }             componentWillUnmount() {                    const { data } = this.state;                    // Theoretical function that saves the data object in JSON format                    setCookie(data);             }    }

Это можно сделать с помощью одного функционального компонента:

JavaScript
function LoadUnload(props) {
const [data, setData] = useState(null);
useEffect(() => {
const loadedData = getCookie(‘data’);
setData(loadedData);
return () => setCookie(data);
}, []);

}

123456789 function LoadUnload(props) {            const [data, setData] = useState(null);            useEffect(() => {                  const loadedData = getCookie(‘data’);                  setData(loadedData);                  return () => setCookie(data);           }, []);     }

Где, используя пустой массив зависимостей, мы говорим, что эффект запускается только при монтировании (componentDidMount), а результат функции — это новая функция, которая вызывается только при размонтировании (componentWillUnmount).

Хук контекста useContext

Если вы когда-либо использовали контекст React, это то, что вам нужно. Контекст в React — это способ передачи данных между различными компонентами без необходимости вручную каскадировать свойства. Например, когда мы хотим создать темы или местоположения, которые должны быть глобальными для всего дерева компонентов, и может быть обременительным распространять их для каждого добавленного компонента.

В случае компонентов класса контекст передается через провайдер, который охватывает дерево компонентов, которые должны иметь этот контекст, так что компонент, который имеет локализацию и использует контекст LocalContext, может быть записан следующим образом:

JavaScript
import {LocalContext} from ‘./local-context’;

class LocalizedText extends React.Component {
render() {
let local = this.context;
return (
<div
{…this.props}
>
<h1>{local.title}</h1>
<p>{local.paragraph}</p>
</div>
);
}
}
LocalizedText.contextType = LocalContext;
export default LocalizedText;

1234567891011121314151617 import {LocalContext} from ‘./local-context’;         class LocalizedText extends React.Component {           render() {               let local = this.context;               return (                   <div                       {…this.props}                     >                             <h1>{local.title}</h1>                             <p>{local.paragraph}</p>                   </div>              );          }  }  LocalizedText.contextType = LocalContext;    export default LocalizedText;

В случае функционального компонента и с использованием хуков мы можем использовать useContext, что позволяет нам получить доступ к созданному контексту, например, для небольшого приложения, которое передает местоположение компоненту, подобному предыдущему, но функционально:

JavaScript
const local = {
en: {
title: ‘Hi’,
paragraph: ‘This is a little test’
},
es: {
title: ‘Hola’,
paragraph: ‘Esto es un pequeño ejemplo’
}
};

const LocalContext = React.createContext(local.es);

function App( ) {
return (
<ThemeContext.Provider value={local.en}>
<Container />
</ThemeContext.Provider>
);
}

function Container(props) {
return (
<div>
<LocalizedText />
</div>
);
}

function LocalizedText(props) {
const local = useContext(LocalContext);
return (
<div {…props}>
<h1>{local.title}</h1>
<p>{local.paragraph}</p>
</div>
);
}

1234567891011121314151617181920212223242526272829303132333435363738 const local = {        en: {           title: ‘Hi’,           paragraph: ‘This is a little test’        },        es: {           title: ‘Hola’,           paragraph: ‘Esto es un pequeño ejemplo’        }  };     const LocalContext = React.createContext(local.es);    function App( ) {      return (         <ThemeContext.Provider value={local.en}>             <Container />         </ThemeContext.Provider>      );  }    function Container(props) {      return (          <div>              <LocalizedText />          </div>      );  }    function LocalizedText(props) {      const local = useContext(LocalContext);      return (         <div {…props}>              <h1>{local.title}</h1>              <p>{local.paragraph}</p>           </div>      );  }

Дополнительные хуки

В дополнение к этим хукам, есть ряд хуков, ориентированных на оптимизацию нашего потока рендеринга, чтобы избежать потери циклов, таких как useCallback и useMemo, цель которых — запоминать функции и функциональные компоненты, чтобы не рендерить их бесполезно, если ни одна из их зависимостей не изменена (как когда мы реализуем жизненный цикл shouldComponentUpdate в компонентах класса).

Однако об этих и других хуках мы увидим больше информации об их применении в следующей части, где будет показан практический пример, где можно применить эти знания.

Зачем использовать хуки?

Использование хуков в функциональных компонентах кажется простым дополнением, которое, по сути, не заменяет и не предназначено для замены текущих компонентов класса, поэтому мы могли бы спросить себя: «В чем смысл использования хуков и изменения способа разработки с помощью React?»

Прежде всего, как сказал Дэн Абрамов в презентации этой функции, использование хуков сокращает количество концепций, необходимых при разработке приложений React, так что нам не нужно постоянно переключаться между функциями, классами или элементами, чтобы выполнять аналогичные задачи; хуки предлагают нам однородность в экосистеме.

Во-вторых, жизненный цикл React был значительно упрощен за счет использования хуков, так что, как мы видели ранее, методы жизненного цикла классов componentDidMount, componentDidUpdate и componentWillUnmount суммированы в одном хуке useEffect, который действует как все три. Рассмотрим таймер, который добавляет определенное количество в секунду, используя сначала компонент класса:

JavaScript
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
seconds: 0
}
}
componentDidMount() {
const {seconds, quantityToAdd} = this.state;
this.interval = setInterval(() => {
this.setState({seconds: seconds + 1})
})
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Han pasado {this.state.seconds} segundos</div>
)
}
}

12345678910111213141516171819202122 class Timer extends React.Component {         constructor(props) {               super(props);               this.state = {                     seconds: 0               }         }         componentDidMount() {               const {seconds, quantityToAdd} = this.state;               this.interval = setInterval(() => {                   this.setState({seconds: seconds + 1})               })         }         componentWillUnmount() {               clearInterval(this.interval);         }         render() {               return (                      <div>Han pasado {this.state.seconds} segundos</div>               )         }  }

Это можно выразить как функциональный компонент с использованием хука:

JavaScript
function Timer(props) {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);
return () => clearInterval(interval);
},[]);
return <div>Han pasado {seconds} segundos</div>;
}

12345678910 function Timer(props) {        const [seconds, setSeconds] = useState(0);        useEffect(() => {              const interval = setInterval(() => {                    setSeconds(seconds => seconds + 1);              }, 1000);              return () => clearInterval(interval);        },[]);        return <div>Han pasado {seconds} segundos</div>;  }

Несомненно, он намного компактнее как по качеству кода, так и по использованию функций, да и в работе он похож.

В-третьих, использование функциональных компонентов усиливает основной принцип React по предотвращению мутаций, поскольку изменение состояния компонента класса аналогично изменению его свойства state, так же, как необходимось выполнить привязку для функций, управляющих событиями, подходов, которые значительно увеличивают сложность и снизить предсказуемость компонента.

И, наконец, введение хука useReducer вводит в ядро React возможность работы с шаблоном Redux без необходимости дополнительных зависимостей. Этот хук, занесенный в категорию «дополнительных хуков», всегда рекомендуется, когда состояние приложения слишком сложное и с большим количеством вложений, поскольку редуктор принимает функцию типа (состояние, действие) => newState, возвращающее текущее состояние и функция диспетчеризации, которая позволяет нам эмулировать функции, доступные в настоящее время в библиотеках redux и react-redux, которые так часто используются для решения проблемы управления состоянием или каскадирования свойств.

Продолжение

React Hooks предлагает нам новую парадигму и новый образ мышления, который тесно связан с функциональным программированием, где функциональные возможности являются предсказуемыми блоками ввода-вывода и считаются первоклассными в использовании, а побочные эффекты изолированы очень контролируемым образом.

Однако обладать теоретическими знаниями — это не значит владеть мастерством их применения, поэтому в следующей части, посвященной хукам, мы разработаем небольшую инкрементальную игру с использованием хуков, уделяя особое внимание потоку приложения, преобразованию в компоненты. и хуки для жизненного цикла, а также использование хуков оптимизации для повышения производительности (например, уже упомянутые useCallback и useMemo).

Автор: Janeth Kent

Источник: webformyself.com

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика
Открыть чат
Если есть вопросы пишите нам
Здравствуйте.
Чем вам помочь?