例如,假设我有一个子组件(表的一行),其状态为a' rating'键,值设置为' 0'在构造函数中。
在getDerivedStateFromProps和ComponentDidMount中,评级设置为this.props.rating。到目前为止一切顺利。
现在用户设置了新的评级,状态更新,调度mysql的查询,一切都很好。但随后用户单击链接(react-router-dom)到他们已经在的同一页面。 React更新所有组件,但由于更高级别的组件没有更改,因此它不会再次查询数据库中的歌曲,因此同一组歌曲将作为道具传递下来,同时传递旧的评级。
我的问题很简单:每当用户重定向到组件时,更高级别的组件是否应该查询数据库?如果是这样,是否有生命周期方法,因为道具不会改变?或者每次用户选择评级时是否应该发送新歌曲集的查询?后者似乎是正确的方法,但也效率低下。
答案 0 :(得分:2)
您需要"lift your state up",以便它位于需要访问它的所有组件的最近共同祖先。更新评级时,需要更新更高级别组件中的状态,不子组件。子组件应该主要是表示性的 - 它需要显示评级并提供更新它的回调。但是实际的更新和mySql交互应该发生在更高的祖先级别,并通过道具传递下去。