React Hooks от входа до отказа (1)

внешний интерфейс React.js

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

Основы хуков React

Компоненты функции React должны быть упомянуты при использовании React Hooks.

Концептуально компоненты похожи на функции JavaScript: они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие, что должно появиться на экране.

Из введения на официальном сайте компонент похож на функцию JavaScript, он получает некоторые входные параметры (реквизиты) и возвращает элемент React.

Когда мы впервые научились использовать фреймворк React, первое, чему мы научились, это черезClassНапишите компоненты, чтобы их можно было хорошо понять и спланировать类组件данные и методы, а также生命周期Это может дать нам более четкое представление о том, когда компонент загружается и когда запускается обновленное состояние.

Это函数组件Шерстяная ткань?函数组件сам решает сопоставление данных с элементами React, аHooksНа этой основе обеспечивается хранение данных и обработка Side Effect.

В этот момент давайте забудем то, что мы уже знаемClassа также生命周期, открыть заново函数组件 + HooksРеагировать.

0. Функциональные компоненты

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

function Header(props) {
    const { title, description, avatar } = props;
    return (
        <div>
            <img src={avatar} />
            <h1>{title}</h1>
            <p>{description}</p>
        </div>
    );
}

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

1. Хранение данных при использовании React Hooks

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

Edit on CodeSandbox

Вышеприведенный пример useState хуков React Ниже приведено простое понимание:

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

Вышеупомянутое утверждение очень расплывчато,某个地方Где это, что определяет对象И где он установлен. Как вы запускаете рендеринг после установки нового значения???

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

в пониманииHookПеред загрузкой вам все равно нужно понять определение и хранение Hook.

НижеHookопределение типа

export type Hook = {
  // 数据
  memoizedState: any,
  // 下面这些暂时不需要了解
  baseState: any,
  baseQueue: Update<any, any> | null,
  queue: UpdateQueue<any, any> | null,
  // 链表下一个节点的指针
  next: Hook | null,
};

Что нам нужно знать, так этоHookчерез链表хранится

В этой статье делается попытка кратко описать логику с помощью блок-схемы. (Приведенная ниже блок-схема неполная! Нет обновлений зависимостей для сравнения)

  • Когда функциональный компонент выполняется в первый раз

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

  • Когда компонент функции обновляется и отображается

Крючки, которые выполняется функция, будет прочитана в порядкеReact Fiber NodeЗацепите узел на .

Как показано на рисунке выше, повторное выполнение функционального компонента зависит от порядка очереди хуков. если в条件判断Использование Hook в этой очереди испортит эту очередь.

Поэтому будут следующие подсказки официального сайта:

Вызывайте хуки только на верхнем уровне. Не вызывайте хуки внутри циклов, условий или вложенных функций.

2. Обработка побочных эффектов с помощью React Hooks

Побочный эффект, личное понимание, в数据->视图В процессе преобразования некоторые специальные时机. мы можем использовать эти时机для обработки некоторой бизнес-логики.

Используется следующееuseEffectПростая подсчетная демонстрация .

Edit on CodeSandbox

использоватьuseEffectЧтобы реализовать некоторые вещи, которые будут обработаны после завершения рендеринга. Вы также можете найти описание React useEffect в Справочнике по API на официальном сайте.

Мы можем углубить наше понимание с помощью блок-схемuseEffectЭтот крючок.

ВышеuseEffectОбщую логику выполнения хука вы найдете на этом рисунке.useEffectЕще один шаг数据比对процесса, SideEffect инициирует вызов только при выполнении следующих условий.

  1. Когда useEffect выполняется в первый раз
  2. При изменении зависимостей useEffect

Мы можем лучше понять два хука, изменив приведенный выше пример подсчета.

Edit on CodeSandbox

function Demo(props) {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(step + count);
    }, 1000)
    return () => {
      clearTimeout(timer);
    }
  }, [count]);

  return (
    <div>
    <div>Count: {count}</div>
    <div>Step: {step}</div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
      </div>);
}

На графике Gif при обновлении шага Step счетчик все равно первый раз+1Последующий+2.

  1. существуетstepПри обновленииuseEffectизcountБез изменений, поэтому обновление не запускалось
  2. useEffectПри срабатывании используются данные, временно хранящиеся в хуке, поэтому размер шагаstepеще 1.

Мы дополняем процесс сравнения в процессе загрузки крюка.

HookЗначение снимка после последнего рендеринга хранится в , поэтому при выполнении также будет использоваться значение, оставшееся от последнего рендеринга.

Здесь мы суммируем процесс рендеринга функциональных компонентов.

3. Резюме

В этой статье упоминается толькоuseState, useEffectДва примера типичных хуков React.

кuseStateНапример, мы узналиReact HooksКак решить проблему невозможности сохранения внутренних данных в функциональном компоненте.

кuseEffectНапример, мы понимаемReact Hooksкак бороться с数据->视图между некоторыми时机обработка

и ясно сказаноHookПричины промежуточного хранения данных (снимков) в

Есть много способов использовать React Hooks, эта глава предназначена только для того, чтобы разобраться с некоторыми основными концепциями React Hooks.

PS: следующая глава будет посвящена тому, «Как разобраться, реорганизовать и инкапсулировать свои собственные хуки в бизнесе».

4. Ссылка

Реагировать на хуки

Категории