Может ли хук useCallback React использоваться условно, даже если он нарушает правила хуков? - PullRequest
Новая
       1

Может ли хук useCallback React использоваться условно, даже если он нарушает правила хуков?

0 голосов
/ 07 мая 2019

Я пытаюсь найти способ, чтобы иметь возможность запоминать компоненты React , указывая конкретные реквизиты.

Например, если вы используете React.memo - он запоминает компоненты на основена всех реквизитах.

То, что я пытаюсь достичь, - это возможность передавать определенные реквизиты как зависимость утилите (скажем, SuperMemo), и компонент будет запоминаться на основе этих реквизитов.Подход очень похож на то, что рекомендует - создайте компонент перед экспортом.

Вот пример кода 

import React from "react";

const isFunction = value =>
  value &&
  (Object.prototype.toString.call(value) === "[object Function]" ||
    "function" === typeof value ||
    value instanceof Function);

export const memo = (Comp, resolver) => {
  if (isFunction(resolver)) {
    const Memoized = props => {
      const deps = resolver(props);
      if (deps && deps.length) {
        // eslint-disable-next-line react-hooks/rules-of-hooks
        return React.useCallback(React.createElement(Comp, props), deps);
      }

      return React.createElement(Comp, props);
    };

    Memoized.displayName = `memoized(${Comp.name})`;
    return Memoized;
  }

  return React.memo(Comp);
};

export default memo;

Вот как он будет использоваться для создания компонентов

import Todo from "./Todo";
import memo from "../memo";

export default memo(Todo, props => [props.text]);

У меня есть рабочие коды и коробка здесь - memo-deps

Это то, что я наблюдал -

  • Я не должениспользуйте React.useCallback или любой хук внутри условного оператора, потому что React необходимо знать порядок, в котором вызываются хуки, и использование его внутри условного выражения может испортить порядок во время выполнения
  • Но React.useCallback работает довольно аккуратно вусловно для моего случая, поскольку я знаю, что порядок выполнения останется неизменным во время выполнения
  • Я не использую ловушку внутри условного оператора во время рендеринга, вместо этого я составляю компонент во время экспорта условно
  • Я думаю о компонентах React как о простых функциях JavaScript и пытаюсь запоминать их так, как я бы запомнил обычную функцию JavaScript
  • Вы можете легко заменить React.useCallback на lodash.memoize, и конечный результат будет примерно таким же
  • Я не хочу использовать внешнюю библиотеку, такую ​​как lodash.memoize, или создавать собственную реализацию мемофикации, пока React.useCallback в значительной степени работает для меня

Здесь я не уверен, что происходит (это мои вопросы) -

  • Компоненты React на самом деле не являются ванильными функциями JavaScriptи я не могу запомнить их с lodash.memoize
  • lodash.memoize и React.useCallback не то же самое, когда я пытаюсь запомнить компонент React
  • React выполняет функцию перед вычислением даже рендеракогда используется React.memo (может быть, для проверки prevProps против newProps?)
  • Моя реализация в порядке, даже если она нарушает правила React?(используйте ловушку в условном выражении)
  • Как еще можно запомнить React.createElement, если не для React.useCallback?

Причина, по которой я мог бы захотеть сделать это-

Я не хочу запоминать обработчики (закрытие со значением и событием) каждый раз, когда я передаю их компоненту, заключенному в React.memo.Я хочу, чтобы иметь возможность декларативно писать зависимостей памятки для компонентов.

...