Что такое крючок? Давайте поговорим о двух часто используемых хуках в React.

Как быстро начать работу с VUE3.0: Прежде чем приступить к изучению,

давайте сначала представим, что такое хук

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

Почему для разработки рекомендуется использовать хуки?

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

Выше приведено краткое личное описание. Дополнительные причины можно найти на официальном сайте реакции:

https://react.docschina.org/docs/hooks-intro. html#motivation

useState

В коде:

React.useState(0) эквивалентно этому в компоненте класса. Добавление

переменной значения атрибута в состояние эквивалентно этому.state в компоненте класса.

Можно использовать значение переменной setVariable. чтобы изменить значение переменной, которая может быть эквивалентна this.setState в компоненте класса,

импортируйте React (useState) из «реагировать».
функция экспорта по умолчанию useState_Demo() {
    const [variable, setVariable] = useState(0);//Посредством деструктурирующего присваивания мы получаем переменную и setVariable
    функция измененияVariable(){
        setVariable((variable) => переменная +1) //Параметр, передаваемый в обратном вызове setVariable, является переменной
    }
    оказывать (
        <дел> 
            <button onclick = {change}>Нажмите меня, чтобы сделать переменную+1</button>
        </div>
    )
}

useEffect

:

Как видно из следующего кода, использование useEffect заменяет использование компонентDidMoun, компонентDidUpdate и компонентWillUnmount в компоненте

импорта React (useState, useEffect) из «реагировать»

функция экспорта по умолчанию useState_Demo() {
   const [variable, setVariable] = useState(0);//Посредством деструктурирующего присваивания мы получаем переменную и setVariable
    
    useEffect(() => {
        //Этот возврат вызывается, когда данные, отслеживаемые компонентом, изменяются или когда он удаляется. При удалении его вызов может быть эквивалентен хуку компонентаWillUnmount return () => {.
            console.log('Компонент удален')
        }
    }, [переменная])//Второй параметр передается [переменная], что означает, что обнаружено изменение переменной при изменении, обратный вызов useEffect будет выполнен снова //Второй параметр передается [] , что означает, что никто. Обнаружение выполняет обратный вызов useEffect только один раз, что эквивалентно перехватчику компонентDidMount. //Второй параметр не передает параметры, пока состояние компонента изменяется, будет выполняться обратный вызов useEffect, что означает, что никто. эквивалентно функции-перехватчика компонентDidUpdatechangeVariable(){
        setVariable((variable) => переменная +1) //Параметр, передаваемый в обратном вызове setVariable, является переменной
    }
    оказывать (
        <дел> 
            <button onclick = {change}>Нажмите меня, чтобы сделать переменную+1</button>
        </div>
    )
}

На что следует обратить внимание при использовании хуков

: 1. Используйте хуки только на самом внешнем уровне функций компонента. Не вызывайте хуки в циклах, условиях или вложенных функциях.

import React (useEffect) из 'react'.
функция экспорта по умолчанию useState_Demo() {
   //Это правильный useEffect(() => {})
    
   //Ошибка 1, использование условного суждения if(true) {
        useEffect(() => {})
   }
   //Ошибка 2, использование цикла while(true) {
        useEffect(() => {})
   }
  //Ошибка 3, использование вложенного useEffect(() => {
      useEffect(() => {})
  })
}

импорта React (useState, useEffect) из 'react'

не может использоваться вне функции компонента.

//Ошибка 1, useState используется вне функции компонента
const [переменная, setVariable] = useState(0);
//Ошибка 2, useEffect используется вне функции компонента
useEffect(() => {})
функция экспорта по умолчанию useState_Demo() {
   //Правильно использовать в компоненте function const [variable, setVariable] = useState(0);
}

3. Чтобы избежать описанных выше ошибок, вы можете установить плагин ESLint eslint-plugin-react-hooks для проверки ошибок в коде.

Пользовательские

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

// Пользовательский хук.
функция useHook(initState) {
  const [переменная, setVariable] = useState(initState)
  возвращаемая переменная;
}
//Используем собственный хук
функция экспорта по умолчанию useState_Demo() {
    константная переменнаяState = useHook(0)
}

Вам может быть интересно, будет ли использование одного и того же хука в нескольких компонентах иметь общее состояние?

Ответ: нет. Поскольку каждый вызов хука, который поставляется с реакцией, независим и не влияет друг на друга, поэтому пользовательский хук независим и не влияет друг на друга, если он вызывается несколько раз.