Автор оригинала: Nathan Sebhastian.

Крючки React – это функции JavaScript, которые вы можете импортировать из пакета RACT, чтобы добавить функции на ваши компоненты. Крючки доступны только для компонентов на основе функций, поэтому их нельзя использовать внутри компонента класса.

Реагирование предоставляет вам функцию 10 крючков, но только 2 из этих крючков будут использоваться очень часто при записи компонентов функций. Они Уместите и Useffect крючки. Давайте узнаем о Уместите первый.

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

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')
}

Обратите внимание на использование квадратных кронштейнов при объявлении состояния переменной. Это ES6 Синтаксис разрушения массива , и это означает, что мы присваиваем первый элемент массива, возвращаемого usteState на Имя и второй элемент для setname Переменная.

Так что это означает, что у нас есть государство по имени Имя И мы можем обновить это, позвонив на setname () функция. Давайте использовать его в операторе возврата:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  return 
 Hello World! My name is {name} 
}

Поскольку функциональные компоненты не имеют setState () Функция, вам нужно использовать setname () Функция для обновления. Вот как вы измените имя из «Джона» на «Люк»:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('John')

  if(name === "John"){
    setName("Luke")
  }

  return 
 Hello World! My name is {name} 
}

Когда у вас есть несколько государств, вы можете позвонить в Уместите крючок столько раз, сколько вам нужно. Крюк получает все действительные типы данных JavaScript, такие как строка, номер, логический, массив и объект:

import React, { useState } from 'react'

function UserComponent() {
  const [name, setName] = useState('Jack')
  const [age, setAge] = useState(10)
  const [isLegal, setLegal] = useState(false)
  const [friends, setFriends] = useState(["John", "Luke"])

  return 
 Hello World! My name is {name} 
}

И это все, что есть к этому. Уместите Крюк в основном позволяет компонентам функции иметь свое внутреннее состояние.

Крючок для использования

Useffect Крючок – это сочетание ComponentDidmount , ComponentDidupdate и ComponentWillunmount методы жизненного цикла класса. Этот крючок является идеальным местом для настройки слушателей, получение данных из API и удаление слушателей до того, как компонент удаляется из DOM.

Давайте посмотрим на пример использования Develfect по сравнению с методами жизненного цикла класса. Обычно в компоненте класса мы пишем этот вид кода:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Nathan',
    };
  }

  componentDidMount() {
    console.log(
      `didMount triggered: Hello I'm ${this.state.name}`
    );
  }

  componentDidUpdate() {
    console.log(
      `didUpdate triggered: Hello I'm ${this.state.name}`
    );
  }

  render() {
    return (
      

        
{`Hello I'm ${this.state.name}`}
        
            this.setState({ name: 'Gary'})
          }
        >
          Change me
        
      
    );
  }
}

С ComponentDidmount Запускается только один раз, когда компонент вставлен в структуру дерева DOM, последующий рендер больше не запускает метод. Для того, чтобы выполнить что-то на каждом рендере, вам нужно использовать ComponentDidupdate метод.

Использование Useffect крючок как иметь оба ComponentDidmount и ComponentDidupdate В одном одном методе, поскольку использование работает на каждом визуализации. Это принимает два аргумента:

• (обязательно) функция для бега на каждом визуализации
• (Необязательно) Массив переменных состояний для наблюдения за изменениями. Useffect будет пропущена, если ни одна из переменных не обновляется.

Перезаписи вышеуказанный класс в функциональный компонент будет выглядеть так:

const Example = props => {
  const [name, setName] = useState('Nathan');

  useEffect(() => {
    console.log(`Hello I'm ${name}`);
  });

  return (
    

      
{`Hello I'm ${name}`}
       {
          setName('Gary')
          }}>
        Change me
      
    
  )
}

Вышеупомянутый компонент функции будет работать внутри Useffect Функция на каждом визуализации. Теперь это не оптимально, потому что состояние не будет обновлено после первого клика. Это где Useffect Второй аргумент вступает в игру.

useEffect(() => {
    console.log(`Hello I'm ${name} and I'm a ${role}`);
  }, 
  [name]);

Второй аргумент Useffect Функция называется «массивом зависимостей». Когда переменная, включенная внутри массива, не изменилась, функция, передаваемая в качестве первого аргумента, не будет выполнена.

Эффект компонентаWillunmount

Если у вас есть код, который необходимо запустить, когда компонент будет удален из дерева DOM, вам нужно указать ComponentWillunmount эффект, написав Возвращение Заявление в первой функции аргумента. Вот пример:

useEffect(() => {
    console.log(`useEffect function`);

    return () => { console.log("componentWillUnmount effect"); }
  }, [name] );

Работает только один раз

Бежать Useffect Крюк только один раз, как ComponentDidmount Функция, вы можете пройти пустой массив во второй аргумент:

useEffect(
  () => {
    console.log(`useEffect function`);
  }, 
  [] );

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

Выровняйте свой навык реагирования сегодня!

Получите мою последнюю книгу и постройте четыре проекта, используя реагирование. Вы получаете 40% скидкой с моей черной пятничной сделкой! Граппировать копию сегодня!