小编chr*_*oni的帖子

我对这些语句感到有点困惑:"呈现整个应用程序"和"将状态传递给子组件".

例1:

我有一个带有AppComponent和的todos应用程序TodosListComponent.该AppComponent抓斗从商店待办事项的阵列,并将其作为一个属性的TodosListComponent.

例2:

我有很多状态的巨大应用程序.我有50个组件构建我的应用程序.我想AppComponent通过所有50个组件将所有状态从商店中传递下来吗？

所以我想知道,会议是什么？让个别组件直接听他们关心的商店对我来说更有意义.优点是只有单个组件重新渲染,但为什么然后"整个应用程序在状态变化上重新渲染"的概念呢？

各自的优点和缺点是什么？常见的惯例是什么？

看看这个JSBIN:http://jsbin.com/hufibisawa/1/edit？css,js,output

启动Chrome:

1. 单击测试按钮
2. 单击test2按钮
3. 你会看到绿色条纹闪烁.我想这是因为"translate3d"不像"宽度"那样计算其像素

当使用"left"和"width"属性时,它可以很好地工作,但效果不是很好.原因是translate3d触发HW加速并使用子像素计算,这给出了非常平滑的动画.

这是一个错误吗？它可以解决吗？使用Firefox这很棒!那么也许是一个Chrome bug？

css

#test {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 300px;
  height: 25px;
  background-color: red;
}

#test2 {
  position: absolute;
  transition: transform 1s ease-out, width 1s ease-out;
  left: 0;
  transform: translate3d(0, 25px, 0);
  top: 0;
  width: 300px;
  height: 25px;
  background-color: green;
}

和JS

document.querySelector('#button').addEventListener('click', function () {

var el = document.querySelector('#test');
  el.style.width = '150px';
  el.style.transform = 'translate3d(0px, 0px, 0)'; …