如何解决如果备忘录效率不高,我可以在React中保持派生状态吗?
摘要
我将一个道具传递给子组件。此属性是根据父组件的状态计算得出的。但是,在每个渲染中从头计算道具是浪费的。备忘录化也不能很好地进行。保持最新状态的最有效方法是将其保持为父组件中的另一个状态,并在某些事件上对其进行更新。我担心的是,React不建议在状态中保持“派生状态”。我正在尝试找到解决此问题的“正确方法”。
问题
React tutorial官方将引导您构建一个Tic-Tac-Toe应用程序。本教程将存储每个动作的整个面板:
class Game extends React.Component {
state = {
history: [
{
squares: Array(9).fill(null)
}
],stepNumber: 0,xIsNext: true,}
// More code here
}
我认为这非常浪费,并且意识到我可以将平方索引简单地存储为以下数组:
class Game extends React.Component {
state = {
moves: [],}
// More code here
}
moves
将包含两位选手的平方指数。偶数索引(第0、2、4等)将包含X
的移动,奇数索引将包含O
的移动。
使用moves
和stepNumber
,当前板的计算方式如下:
static getSquares(moves,stepNumber) {
const squares = Array(9).fill(null);
moves = moves.slice(0,stepNumber);
for (let i = 0; i < moves.length; i++) {
squares[moves[i]] = i % 2 === 0 ? 'X' : 'O';
}
return squares;
}
我知道这不是一个很浪费的计算,但是,如果我们将squares
保持在该状态,那么每次执行新动作时,我们都可以简单地编辑squares
的单个元素:
addMove = move => {
this.setState( ({moves,stepNumber,squares}) => {
moves = moves.slice(0,stepNumber);
if (moves.includes(move)) return;
squares[move] = stepNumber % 2 === 0 ? 'X' : 'O';
stepNumber++;
moves.push(move);
return {
moves,squares,}
});
}
这样,我们只需更改一个正方形元素即可。这比在每次渲染时从头计算整个板要有效得多。类似的想法适用于另一个名为jumpTo
的事件。
AFAICT,由于我们正在使用squares
的上一个状态来计算其下一个状态,因此在此处无法进行记忆。
因此,即使squares
是技术上派生的状态,并且React不建议将派生状态保持在该状态,但我无法找到一种更有效的方法来计算它而不将其视为状态,因为最有效计算方法使用了它的先前版本。
我的问题是,什么是解决此问题的“正确方法”?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。