javascript - 是否可以有条件地使用 useCallback React hook，即使它违反了 hooks 的规则？

Question

我正在尝试找出一种能够 的方法memoize React 组件 通过指定特定的 Prop 。

例如，如果您使用 React.memo - 它根据所有 Prop 内存组件。

我想要实现的是能够将特定的 props 作为依赖项传递给 util(例如 SuperMemo )，并且组件将根据这些 props 进行内存。该方法与 recompose 非常相似。 — 在导出前组合组件。

这是一个示例代码

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或条件语句中的任何钩子(Hook)，因为 React 需要知道调用钩子(Hook)的顺序，并且在条件语句中使用它可能会在运行时弄乱顺序

但是React.useCallback在我的情况下工作得非常整洁，因为我知道在运行时订单将保持不变

我没有在渲染期间使用条件语句中的钩子(Hook)，而是在导出期间有条件地组合组件

我正在考虑将 React 组件视为普通的 JavaScript 函数，并尝试像内存常规 JavaScript 函数

一样内存它

我可以轻松替换 React.useCallback与 lodash.memoize最终结果将几乎相同

我不想使用像 lodash.memoize 这样的外部库或在 React.useCallback 时构建自定义的内存实现几乎为我工作

这是我不确定发生了什么的地方(这些是我的问题)-

React 组件并不是真正的原生 JavaScript 函数，我无法用 lodash.memoize 来内存它们

lodash.memoize和 React.useCallback当我尝试内存一个 React 组件时不一样

即使在 React.memo 时，React 也会在确定渲染之前执行该函数。被使用(也许检查 prevProps 和 newProps？)

即使它违反了 React 的规则，我的实现是否还可以？ (在条件语句中使用钩子(Hook))

我还能如何记住 React.createElement如果不是 React.useCallback ?

我为什么要这样做的原因——

每次我将处理程序(带有值和事件的闭包)传递给包装在 React.memo 中的组件时，我都不想记住它们。 .我希望能够以声明方式为组件编写 memoize 依赖项。

Answer 1

React.memo接受一个函数作为第二个参数来进行自定义 Prop 比较。

By default it will only shallowly compare complex objects in the propsobject. If you want control over the comparison, you can also providea custom comparison function as the second argument.

您可以像这样在您的 util 函数中使用它:

export const memoWithSecondParam = (Comp, deps = []) => {
  return React.memo(Comp, (prevProps, nextProps) => {
    return deps.every(d => prevProps[d] === nextProps[d])
  });
};

并这样调用它:

export default memoWithSecondParam(Todo, ["text"]);