小编Din*_*yan的帖子

我正在构建一个React库并使用Webpack对其进行捆绑。我非常了解依赖关系和对等依赖关系背后的概念。

在项目中，React被指定为对等依赖项。

"peerDependencies": {
  "react": ">= 16.3.0",
  "react-dom": ">= 16.3.0"
}

这是我的build剧本

"build": "webpack --config webpack.config.babel.js"

这是我的 webpack.config.babel.js

import path from 'path';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const packageJson = require('./package.json');

export default () => ({
  mode: 'production',
  entry: {
    index: path.join(__dirname, 'src/index.js')
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    library: packageJson.name,
    libraryTarget: 'umd'
  },

  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', …

我试图找出一种方法来通过指定特定的道具来记忆 React 组件。

例如，如果您使用React.memo- 它会根据所有道具记住组件。

我想要实现的是能够将特定道具作为依赖项传递给 util（例如，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 = …