使用Context API示例解释的React高阶组件

Posted 2021-05-01

我试图理解使用上下文api的高阶组件的一个例子，使用here。

既然，我对新的反应和函数编程都很陌生，我不明白事情是如何在这里起作用的。我们正在向函数withUser发送一个函数，它返回另一个接收props的函数。

function withUser(Component) {
  return function ConnectedComponent(props) {
    return (
      <UserContext.Consumer>
        {user => <Component {...props} user={user} />}
      </UserContext.Consumer>
    );
  };
}

因此，当我们创建UserAvatar时，我们传递接收props的函数，并返回img。

const UserAvatar = withUser(({ user, size }) => (
  <img
    className={`user-avatar ${size || ""}`}
    alt="user avatar"
    src={user.avatar}
  />
));

所以，基本上在此之后我们可以想象UserAvatar是：

const UserAvatar = props => {
        return (
          <UserContext.Consumer>
            {user => <Component {...props} user={user} />}
          </UserContext.Consumer>
        );
      };

Component在哪里：

({ user, size }) => (
      <img
        className={`user-avatar ${size || ""}`}
        alt="user avatar"
        src={user.avatar}
      />
    )

我希望到目前为止这是正确的，但那时我不明白的是这一行：

{user => <Component {...props} user={user} />}

为什么我们需要将它作为一个函数而不仅仅返回组件，当我们已经有props并将user传递给UserAvatar组件时从UserStats组件向下传递？

const UserStats = () => (
  <UserContext.Consumer>
    {user => (
      <div className="user-stats">
        <div>
          <UserAvatar user={user} />
          {user.name}
        </div>
        <div className="stats">
          <div>{user.followers} Followers</div>
          <div>Following {user.following}</div>
        </div>
      </div>
    )}
  </UserContext.Consumer>
);

答案

也许最简单的方法是描述一个类似的概念：函数装饰器。

// Start with a function, any function.
let add = (a, b) => a + b;

但现在我们要为参数添加日志记录并返回：

let addWithLogging = (a, b) => {
  console.log("Args are ", a, b);
  const result = a + b;
  console.log("Result is ", result);
  return result;
}

BARF。我们简单的单行函数现在由于添加两个数字完全偶然的一堆东西而变得复杂。如果我们的大部分功能都很简单，并且我们想要为所有这些功能添加日志记录，那么背面的计算就是我们的代码库会增加一倍。双扒。

但是等等，这是javascript，我们有更高阶的函数，可以提取一个装饰器：

// Here we take a function f and wrap it. We'll return a function that will
// collect the arguments, log them, perform f on them, log the result, and
// then finally return that result to the caller.
const withLogging = f => (...args) => {
  console.log("Args are ", ...args);
  const result = f(...args);
  console.log("Result is ", result);
  return result;
};

addWithLogging = withLogging(add);

React使用与更高阶组件相同的想法，您有一个需要一些额外功能的组件（经常状态和/或进行AJAX调用）。您不希望将所有这些简单的可测试纯功能组件复杂化，因此您使用更高阶的组件。与上面的日志记录装饰器非常相似，示例中的高阶组件将一个组件作为参数，并返回一个匿名纯函数组件，该组件实际接收道具并呈现包含在UserContext组件中的传入组件。

你可以让UserContext组件成为另一个组件返回的JSX的一部分：

const UserAvatar = ({ user, size }) => (
  <UserContext.Consumer>
    <img
      className={`user-avatar ${size || ""}`}
      alt="user avatar"
      src={user.avatar}
    />
  </UserContext.Consumer>
);

但现在，就像在日志记录示例中一样，您需要在每个需要它的组件中重复样板。

关于你引用的特定行，你可以说在那里不需要函数，因为据我所知，user已经在props中呈现组件。作为参考，这里是compiled JSX。

编辑

应该更仔细地阅读代码。

你需要一个函数的原因是因为它是一个上下文消费者。 user通过上下文提供程序注入，它执行此操作的唯一方法是为其提供一个函数来传递参数。