javascript - 了解 React 服务器端渲染中使用 .dispatch 和箭头函数链接的 .map 和 .filter

Question

我有简单的 Express 背景，正在学习如何使用 React 进行服务器端渲染。

我遇到了一个示例应用程序，其路由定义如下:

export default [
    {
        path: "/",
        component: Home,
        exact: true,
    },
...
}

服务器像这样处理路由:

app.get( "/*", ( req, res ) => {
...
 const dataRequirements =
        routes
            .filter( route => matchPath( req.url, route ) ) // filter matching paths
            .map( route => route.component ) // map to components
            .filter( comp => comp.serverFetch ) // check if components have data requirement
            .map( comp => store.dispatch( comp.serverFetch( ) ) ); // dispatch data requirement

    Promise.all( dataRequirements ).then( ( ) => {
        const jsx = (
                 <ReduxProvider store={ store }>
                     <StaticRouter context={ context } location={ req.url }>

我了解路由的模块化，以及这串方法如何实现任何所需数据的一般过程。据我了解:

1. 路由对象通过过滤器拉取

2. 将汇集到 LinkRouter 的必要路由映射到其所需的组件

这就是我变得模糊的地方，因为我不明白调用 .filter().map().filter().map() 实际上对数据类型做了什么，我已经从未见过方法调用的分层，也找不到解释它的资源。

我明白 Promise.all 调用所有数据，然后等待并调用不带参数的箭头函数。但是我在对过滤器和映射的第三次和第四次调用以及 Promise.all( dataRequirements ) 如何调用和等待所有必要的数据调用方面遇到了麻烦。

Answer 1

您只需使用第二个过滤器和映射进一步修改数组 - 您过滤不合适的元素，您映射 将它们转换为您的下一个 filter 调用将使用的格式，最后将它们映射 为您的 Promise.all 的格式打电话。

Promise.all是一个 Promise 方法，当给定可迭代集合时，仅当集合中的所有可解析元素都已解析时才进行解析。它本质上会等待，直到集合中的所有 Promise 都已单独解决，然后 执行成功函数。