Question

我正在阅读有关react的指南，其中一个示例使我有些困惑，这是其中的一部分：

import React, { Component } from 'react';

function doFilter(query) {
  return function (user) {
    return query === user.name;
  }
}

class App extends Component {
  ...

  render() {
    const users = [
      { name: 'Robin' },
      { name: 'Markus' },
    ];

    return (
      <div>
        <ul>
          {users
            .filter(doFilter(this.state.query))
            .map(user => <li>{user.name}</li>)

我不了解过滤器-我知道过滤器接受一个回调，该回调应返回true或false，在这种情况下，doFilter函数返回另一个函数，我不确定如何或何时调用此返回的函数，因为filter已经调用了doFilter函数。

如果有人可以请分解发生的事情的步骤，将会有所帮助。

Answer 1

以下：

users.filter(doFilter(this.state.query))

...发生这种情况的第一件事是评价this.state.query，然后调用doFilter传递该值。

此返回一个函数，如下所示：

function (user) {
  return query === user.name;
}

的值query，势必传递给的值doFilter。

然后，users.filter被调用，该函数作为参数。请注意，在这个阶段，doFilter不再扮演任何角色。它是匿名函数执行滤波，返回一个布尔每个user它被调用。

此高阶函数如何工作？

1 个答案: