Angular4 ChangeDetection OnPush 和 Redux - 性能答案

【问题标题】：Angular4 ChangeDetection OnPush and Redux - PerformanceAngular4 ChangeDetection OnPush 和 Redux - 性能
【发布时间】：2017-11-24 06:35:00
【问题描述】：

我试图了解在保持应用程序状态同步时使用 Redux 风格设计方法的含义。特别是在处理大量数据集时的性能结果。假设我们有一个像下面这样简单的 reducer，它只返回状态：

const reducer = (state:AppState, action:Action)=>{
  swtich(action.type) {
      case "ADD":
           return state
      default:
           return state
  }
}

然后在我的顶级组件中订阅它：

@Component({...})
class AppComponent implements ngOnInit {
     propertyA:number;
     propertyB:number;
     constructor(private store:AppStore<AppState>) {}

      ngOnInit() {
          this.store.subscribe((data:AppData)=>{
               this.propertyA = data.propertyA;
               this.propertyB = data.propertyB;
           })
      }
}

然后子组件通过@Input简单地接收propertyA和propertyB

@Component({ changeDetection: ChangeDetectionStrategy.OnPush})
class Child {
   @Input() propertA:number;
   @Input() propertyB:number;

}

现在这不会完全使 OnPush 策略变得多余吗？由于根减速器总是会返回一个新状态，这也应该改变输入属性的引用？还是我没有完全理解 OnPush 策略的工作原理？在上述情况下，这没什么大不了的，但是更大的数据集呢？有了更多的“分支”。每个动作都将始终返回一个新状态并触发整个组件树上的更改检测。

现在我知道我可以订阅我所在州的各个“分支机构”。但是根 reducer 不会总是返回全新的状态，然后触发更改检测吗？

【问题讨论】：

标签： angular performance redux angular2-changedetection

【解决方案1】：

来自redux.js.org

常见的 Redux 误解：您需要深度克隆状态。现实：如果里面的东西没有改变，保持它的引用不变！

【讨论】：

非常感谢！我确实对 redux.js.org 网站提到的这种误解。在如何使用 OnPush ChangeDetection 策略优化我的组件方面也对我有很大帮助。