在React-Redux的上下文中什么是“撕裂”?

时间:2019-02-26 18:11:50

标签: javascript reactjs redux react-redux

React-Redux的6.0版提到:

  

在版本6中,所有组件都从上下文读取相同的当前存储状态值,这意味着树将是一致的并且没有“撕裂”。

我认为这是有益的,但是我想更好地理解“撕扯”在这种情况下的含义,并且我想了解他们概述的新方法如何实际上减少“撕扯”,如果有人可以的话。详细说明。

1 个答案:

答案 0 :(得分:3)

我是Redux的维护者,我写了该段。

这是React团队的Andrew Clark提出的一个担忧,当与React即将推出的“并发模式”一起使用时,它是外部状态管理工具的潜在问题。

在并发模式下,React将能够暂停通过树的渲染过程,并在以后继续计算树的其余部分。

如果树中的组件正在读取外部值,并且该值在React的渲染暂停时发生变化,则树中的某些上层组件可能已使用外部值1进行了渲染,而某些后来的组件可能是使用外部值2进行了渲染。这将导致不一致的渲染输出,因为树的不同部分基于同一渲染过程中的不同值确定其行为。这是“撕裂”。

在v6中使用const markup = ` <p>fffff ffff fff</p> <p>fff</p> <p><br></p> <p><br></p> <p>fffffff</p> <p><br></p> <p><br></p> <p><br></p> <p>ff</p> <p><br></p> `; const target = '<p><br><\/p>\n'; const result = markup.replace(new RegExp(`(${target}){2,}`, 'g'), target); console.log(result);的部分想法是,由于React确保给定的渲染过程在所有地方都使用相同的上下文值,因此不会有撕裂的机会。

v6实现确实可以工作,但是在某些情况下效率不如我们希望的那样。我们目前是working on coming up with a different internal implementation that goes back to using direct subscriptions instead。这确实意味着再次有可能撕裂,但是在这一点上,我们需要坐下来等待React团队完成并发模式的整合,然后才能花时间了解问题的实质。