Как работает эта функция высшего порядка?

Question

Я читал руководство по реакции, и один из примеров меня немного смутил, вот его раздел:

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 возвращает другую функцию, я 'Я не уверен, как или когда вызывается эта возвращаемая функция, так как фильтр уже вызвал функцию 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, с которым она вызывается.