在ReactJS中重构Memory Numbers游戏涉及多个基础概念和技术点。以下是详细的解答:
useState
或useReducer
钩子来管理组件的内部状态。以下是一个简单的Memory Numbers游戏的React实现:
import React, { useState } from 'react';
const MemoryNumbersGame = () => {
const [cards, setCards] = useState([]);
const [flippedCards, setFlippedCards] = useState([]);
const [matchedPairs, setMatchedPairs] = useState(0);
const cardValues = Array.from({ length: 10 }, (_, i) => i).concat(Array.from({ length: 10 }, (_, i) => i));
const shuffleCards = () => {
setCards(cardValues.sort(() => Math.random() - 0.5));
};
const handleCardClick = (value) => {
if (flippedCards.length < 2 && !flippedCards.includes(value)) {
setFlippedCards([...flippedCards, value]);
if (flippedCards.length === 2) {
checkForMatch();
}
}
};
const checkForMatch = () => {
if (flippedCards[0] === flippedCards[1]) {
setMatchedPairs(matchedPairs + 1);
} else {
setTimeout(() => {
setFlippedCards([]);
}, 1000);
}
};
return (
<div>
<h1>Memory Numbers Game</h1>
<button onClick={shuffleCards}>Shuffle Cards</button>
<div className="card-container">
{cards.map((value, index) => (
<div
key={index}
className={`card ${flippedCards.includes(value) ? 'flipped' : ''}`}
onClick={() => handleCardClick(value)}
>
<div className="card-inner">
<div className="card-front">?</div>
<div className="card-back">{value}</div>
</div>
</div>
))}
</div>
<p>Matched Pairs: {matchedPairs}</p>
</div>
);
};
export default MemoryNumbersGame;
useEffect
钩子来监听状态变化,确保UI及时更新。memo
或PureComponent
来优化组件渲染。import React, { useState, useEffect, memo } from 'react';
const Card = memo(({ value, flipped, onClick }) => {
return (
<div className={`card ${flipped ? 'flipped' : ''}`} onClick={onClick}>
<div className="card-inner">
<div className="card-front">?</div>
<div className="card-back">{value}</div>
</div>
</div>
);
});
const MemoryNumbersGame = () => {
// ... 其他代码保持不变
return (
<div>
{/* ... 其他代码保持不变 */}
<div className="card-container">
{cards.map((value, index) => (
<Card
key={index}
value={value}
flipped={flippedCards.includes(value)}
onClick={() => handleCardClick(value)}
/>
))}
</div>
{/* ... 其他代码保持不变 */}
</div>
);
};
export default MemoryNumbersGame;
通过以上步骤,你可以成功地在ReactJS中重构Memory Numbers游戏,并解决可能遇到的问题。
没有搜到相关的文章