小编Pad*_*ann的帖子

我对React,Redux和ImmutableJS很新,并且遇到了一些性能问题.

我有一个大型的数据树结构,我目前正在这个结构中存储为一个平面列表:

new Map({
  1: new Node({
    id: 1,
    text: 'Root',
    children: [2,3]
  }),
  2: new Node({
    id: 2,
    text: 'Child 1',
    children: [4]
  }),
  3: new Node({
    id: 3,
    text: 'Child 2',
    children: []
  }),
  4: new Node({
    id: 4,
    text: 'Child of child 1',
    children: []
  })
});

虽然将其构建为平面列表使得更新节点变得容易,但我发现随着树的增长,交互变得缓慢.交互包括能够选择一个或多个节点,切换其子节点的可见性,更新文本等.看起来缓慢的UI的一个关键原因是每次交互都重绘整个树.

我想使用shouldComponentUpdate如果我更新节点3,节点2和4不更新.如果将数据存储为树(我可以简单地检查是否this.props !== nextProps),这将很容易,但是当数据存储在平面列表中时,检查将更加复杂.

我应该如何存储数据并使用shouldComponentUpdate(或其他方法)来支持具有数百或数千个树节点的平滑UI？

编辑

我一直在顶层连接商店,然后必须将整个商店传递给子组件.

我的结构是:

<NodeTree> 
  <NodeBranch>
    <Node>{{text}}</Node>
    <NodeTree>...</NodeTree>
  </NodeBranch>
  <NodeBranch>
    <Node>{{text}}</Node>
    <NodeTree>...</NodeTree>
  </NodeBranch>
  ...
</NodeTree>

该<Node>可以做一个简单的检查以shouldComponentUpdate查看是否标题已经改变,但我没有类似的解决方案对使用 …

我让Babel 6与Gulp和Webpack很好地合作.我现在需要将其填充以获得IE8支持.

我已经安装了babel-polyfill,但无法使其工作,文档和谷歌到目前为止还没有帮助.

我的Gulp任务(包括Webpack配置):

gulp.task('webpack', function(callback) {
  var webpackConfig = {
    context: __dirname + '../../../js',
    entry: {
      homepage: [
        'babel-polyfill',
        './public/homepage/homepage.js'
      ]
    },
    output: {
      path: __dirname + '../../../dist/public/scripts/',
      filename: '[name].bundle.js'
    },
    module: {
      loaders: [
        {
          loader: 'babel-loader',
          test: /\.js$/, // Only run .js files through Babel
          include: /js/, // Only include the /js dir
          query: {
            //plugins: ['transform-runtime'], // Disabled pending fix to https://github.com/babel/babel/issues/2954
            presets: ['es2015'],//, 'stage-0'
          }
        }
      ]
    }
  };

  webpack(webpackConfig, function(err, stats) {
    if (err) …

我有一个带有用于添加人员的表单的 Angular 页面，以及一个用于提交人员列表的按钮（在此表单之外）。

当用户关注表单中的文本输入，然后单击提交列表时，会出现文本输入的验证错误，但从未发生提交事件。

这里问题的一个例子：http : //plnkr.co/edit/6Z0UUs

<div ng-controller="MyCtrl as vm">
  <form name="form1" novalidate="">
    <input type="text" name="field1" ng-model="vm.name" required>
    <div ng-messages="form1.field1.$error" ng-if="form1.field1.$touched">
      <label ng-message="required">Name is required</label>
    </div>
    <!-- 
    This form adds a person to a list. I've not included this code to keep the example simple 
    <input type="submit" value="Add person"> 
    -->
  </form>
  <button ng-click="vm.submit()">Submit list</button>
</div>

——

angular.module('myApp',[])
.controller('MyCtrl', function() {
    var vm = this;

    vm.name = '';

    vm.submit = function () {
        alert('submitted');    
    };
});

复制：

1. 单击文本输入但留空
2. 点击提交 …