反应数据获取 - 两阶段更新[关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了反应数据获取 - 两阶段更新[关闭]相关的知识，希望对你有一定的参考价值。
我很陌生，完全坚持这一点。
假设我有一个相当简单的应用程序，具有以下结构：
<App>
|___<Container>
|___<Chart>
在<App>，我有一个事件修改<Container>的道具，然后在<Container>中将查询方法发送到基于这些道具的数据库，这需要一定的时间（例如1秒）。一旦这个查询返回，它就会修改<Container>的状态，特别是进入<Chart>道具的数据属性。
现在说我希望<Chart>能够看到<App>之前和新道具之间的变化（假设这些也一直传递给<Chart>）。我们得到的是：
应用事件 - >修改应用状态 - >根据道具更新容器 - >触发查询
但是我可以在哪里放置这个“火灾查询”功能？如果我在ComponentDidUpdate中执行此操作，则意味着我丢失了之前的道具，因为查询修改了<Container>的状态，因此第二次更新<Chart>，这意味着第二次，'prevProps'将在之后更新道具在<App>元素中的事件。
我能在这做什么？我无法看到我如何在这里使用shouldComponentUpdate，因为它在更新之前触发，我需要触发'update'事件，以便<Container>元素有理由在<App>事件后重新获取数据。
任何帮助将非常感激！
似乎是道具与国家之间的一些混乱。将状态视为该组件的私有状态。更新容器的状态并不意味着道具被改变。
想想一个电灯开关。国家开启或关闭。然而，家居设计师可能已经定义了某些属性，并将其传递给室内设计团队，例如颜色和形状。这些是分开的。
关键点是灯开关可以处于打开或关闭状态，这不会改变灯开关的属性。
在您的示例中，可以将prop历史记录作为容器状态的一部分进行跟踪。
class Container extends React.Component
constructor(props)
super(props);
this.state =
data: [
[Math.random(), Math.random(), Math.random()]
]
componentDidMount()
setInterval(() => this.setState(
data: [
...this.state.data,
[Math.random(), Math.random(), Math.random()]
]
), 5000)
render()
return (
<Chart data=this.state.data />
);
class Chart extends React.Component
render()
const data = this.props.data.slice(-2);
const previousDataSum = (data[0] || []).reduce((total, current) => total + current, 0);
const currentDataSum = (data[1] || []).reduce((total, current) => total + current, 0);
return (
<div>
<div>
PrevPropsSum: previousDataSum
</div>
<div>
CurrentPropsSum: currentDataSum
</div>
<div>
Difference: previousDataSum && currentDataSum ? previousDataSum - currentDataSum : 0
</div>
</div>
)
ReactDOM.render(<Container />, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>以上是关于反应数据获取 - 两阶段更新[关闭]的主要内容，如果未能解决你的问题，请参考以下文章