小编Jon*_*Jon的帖子

我有一个Promise数组,我正在使用Promise.all(arrayOfPromises)解析;

我接着继续承诺链.看起来像这样

existingPromiseChain = existingPromiseChain.then(function() {
  var arrayOfPromises = state.routes.map(function(route){
    return route.handler.promiseHandler();
  });
  return Promise.all(arrayOfPromises)
});

existingPromiseChain = existingPromiseChain.then(function(arrayResolved) {
  // do stuff with my array of resolved promises, eventually ending with a res.send();
});

我想添加一个catch语句来处理单个promise,以防它出错.但是当我尝试时,Promise.all返回它找到的第一个错误(忽略其余的),然后我无法从其余的数据中获取数据数组中的promise(没有错误).

我尝试过像......

existingPromiseChain = existingPromiseChain.then(function() {
      var arrayOfPromises = state.routes.map(function(route){
        return route.handler.promiseHandler()
          .then(function(data) {
             return data;
          })
          .catch(function(err) {
             return err
          });
      });
      return Promise.all(arrayOfPromises)
    });

existingPromiseChain = existingPromiseChain.then(function(arrayResolved) {
      // do stuff with my array of resolved promises, eventually ending with a res.send();
}); …

我注意到reactDOM.renderToString()在服务器上渲染大型组件树时,该方法开始显着减慢.

背景

一点背景.该系统是一个完全同构的堆栈.最高级别的App组件呈现模板,页面,dom元素和更多组件.查看反应代码,我发现它渲染了~1500个组件(这包括任何简单的dom标记,它被视为一个简单的组件,<p>this is a react component</p>.

在开发中,渲染~1500个组件需要大约200-300ms.通过删除一些组件,我能够在~175-225ms内获得~1200个组件.

在生产中,〜1500个组件上的renderToString大约需要50-200ms.

时间似乎是线性的.没有一个组件是慢的,而是它的总和.

问题

这会在服务器上产生一些问题.冗长的方法导致服务器响应时间过长.TTFB比它应该高很多.使用api调用和业务逻辑,响应应该是250ms,但是使用250ms renderToString它会加倍!SEO和用户不好.此外,作为同步方法,renderToString()可以阻止节点服务器并备份后续请求(这可以通过使用2个单独的节点服务器来解决:1作为Web服务器,1作为服务来单独呈现反应).

尝试

理想情况下,生产中需要5-50ms的renderToString.我一直在研究一些想法,但我不确定最好的方法是什么.

想法1:缓存组件

任何标记为"静态"的组件都可以缓存.通过使用呈现的标记保持缓存,renderToString()可以在呈现之前检查缓存.如果找到一个组件,它会自动抓取该字符串.在高级组件中执行此操作将保存所有嵌套子组件的安装.您必须使用当前的rootID替换缓存的组件标记的反应rootID.

想法2:将组件标记为简单/笨

通过将组件定义为"简单",react应该能够在呈现时跳过所有生命周期方法.反应已经这样做了芯反应,DOM组件(<p/>,<h1/>,等).很高兴扩展自定义组件以使用相同的优化.

想法3:在服务器端渲染上跳过组件

服务器上不需要返回的组件(没有SEO值)可以简单地跳过.客户端加载后,设置一个clientLoaded标志true并将其传递给强制重新渲染.

结束和其他尝试

到目前为止,我实现的唯一解决方案是减少服务器上呈现的组件数量.

我们正在研究的一些项目包括:

• React-dom-stream https://github.com/aickin/react-dom-stream(仍然致力于为测试实现此功能)
• Babel内联元素https://babeljs.io/docs/plugins/transform-react-inline-elements/(看起来像是Idea 2)

有人遇到过类似的问题吗？你有什么能做的？谢谢.

我正在尝试在React中创建一个博客.在我的主ReactBlog组件中,我正在对节点服务器进行AJAX调用以返回一组帖子.我想将此帖子数据作为道具传递给不同的组件.

特别是,我有一个名为PostViewer的组件,它将显示帖子信息.我希望它默认显示从其父级通过props传入的帖子,否则显示通过状态调用设置的数据.

目前,我的代码的相关部分看起来像这样.

var ReactBlog = React.createClass({
  getInitialState: function() {
    return {
      posts: []
    };
  },
  componentDidMount: function() {
    $.get(this.props.url, function(data) {
      if (this.isMounted()) {
        this.setState({
          posts: data
        });
      }
    }.bind(this));
  },
  render: function() {
    var latestPost = this.state.posts[0];
    return (
      <div className="layout">
        <div className="layout layout-sidebar">
          <PostList posts={this.state.posts}/>
        </div>
        <div className="layout layout-content">
          <PostViewer post={latestPost}/>
        </div>
      </div>
    )
  }
});

和子组件:

var PostViewer = React.createClass({
  getInitialState: function() {
    return {
      post: this.props.post
    }
  },
  render: function() {
    /* handle check for …

我有一个应用程序使用react @ 0.14,redux @ 3.05,react-router @ 1.0.3和redux-simple-router @ 2.0.2.我正在尝试根据存储状态为某些路由配置onEnter转换.转换挂钩成功触发并将新状态推送到我的商店,这会更改网址.但是,在页面上呈现的实际组件是路由匹配的原始组件处理程序,而不是新URL的新组件处理程序.

这是我的routes.js文件的样子

export default function configRoutes(store) {
  const authTransition = function authTransition(location, replaceWith) {
    const state = store.getState()
    const user = state.user

    if (!user.isAuthenticated) {
      store.dispatch(routeActions.push('/login'))
    }
  }

  return (
    <Route component={App}>
      <Route path="/" component={Home}/>
      <Route path="/login" component={Login}/>
      <Route path="/dashboard" component={Dashboard} onEnter={authTransition}/>
      <Route path="/workouts" component={Workout} onEnter={authTransition}>
        <IndexRoute component={WorkoutsView}/>
        <Route path="/workouts/create" component={WorkoutCreate}/>
      </Route>
    </Route>
  )
}

这是我的Root.js组件插入到DOM中

export default class Root extends React.Component {
  render() {
    const { store, …

我一直在使用white-space: no-wrap、text-overflow: ellipsis和overflow: hide CSS属性来为多行文本创建省略号截断。但是，当使用 Flexbox 时，这不起作用。

当使用 flex 时，text-overflow: ellipsis 似乎总是将 flex-item 的高度截断为一行。

是否可以对多行​​文本使用 flex 和 css 省略号截断的某种组合？

<div className="flex-container">
  <div className="flex-item">
    <p>long multiline text that i would like to truncate</p>
  </div>
</div>

我可以让它与单行截断一起工作。与 flex + white-space: nowrap 结合手动设置高度不起作用。

我有一个 JS Web 应用程序，它有一个客户端和服务器包，两者都是使用 webpack 的节点 api 构建的。

在开发模式下运行我的项目需要经过以下步骤：

1. 运行两个 webpack 构建，产生两个输出文件。
2. 服务器包输出到 dist/server/index.js
3. 使用 dist/server/index.js 路径生成子节点进程
4. 监视文件夹的更改。发生更改时，终止旧的子进程并重新运行步骤 1-3

我想使用 vscode 添加节点服务器调试。

到目前为止，当我启动新的子进程时，我在步骤 3 中添加了以下标志。

['--inspect=9222', '--no-lazy', '--inspect-brk']

我在 vscode 中的 launch.json 文件如下所示

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to dev server",
            "type": "node",
            "request": "attach",
            "protocol": "inspector",
            "address": "localhost",
            "port": 9222,
            "restart": true,
            "trace": true,
            "stopOnEntry": true
        }
    ]
}

当我启动服务器并运行调试器时，一切都正常。

但是，我很想修复以下两件事：

1. 即使使用"stopOnEntry": true，调试器也不会拾取任何断点，除非我"--inspect-brk"在启动子进程时添加断点。这很烦人，因为如果我不运行调试器，进程将挂起并且不会继续执行。包含此标志后，当我运行调试器时，构建的dist/server/index.js文件将在编辑器中打开，并在第 1 行设置断点。如果我点击“继续”，则所有未来的调试都会起作用。
2. 我使用 webpack 的“inline-source-map”选项生成源映射。这会将“原始源”放入构建的文件中。不过，这是babel转换后的源码，调试代码有点烦人。 …

是否可以在单个查询中有两个联接，其中第二个联接是 table_2 和 table_3 之间的连接（table_1 中没有键引用）？

table_1

id | column_a



table_2

id | table_1_id | table_3_id | column_b



table_3

id | column_c

现有查询：

SELECT * FROM table_1 RIGHT OUTER JOIN table_2 WHERE table_1.id id = ? and WHERE column_a = ?

为我提供了 table_1 和 table_2 中所需的信息，但 table_2 的信息将只有 table_3_id 列。

在同一个查询中，我想加入 table_3 以根据 table_2.table_3_id 获取其数据

我目前有一个可在构造函数中设置类值的Typescript类。然后，我在类方法中使用“ this”引用这些值。.ts文件可以正常编译而不会发出警告。但是，当我在另一个项目中导入已编译的.js文件时，如果我调用类方法，则会收到错误消息，即未定义。

我用打字稿为文件写了一些测试，它们都工作正常。

这是一个简化的示例。

# class .ts file

export class MyClass {
  public myValue: number;

  constructor(val: number) {
     this.myValue = val;
  }

  logValue() {
     console.log(this);

     console.log(this.myValue);
  }
}


# regular js project importing built .js file

import { MyClass } from 'myProject'

const x = new MyClass(5);

x.logValue(); // error, cannot read property myValue of undefined, first console.log logs 'undefined';

这是我的tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",

        // useTypeInferenceAsMuchAsPossible
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "./lib",
        "allowJs": true, …