Доброе утро, сограждане. Оцените мой код (React) по 10-бальной шкале, и укажите на явные ошибки, затупы, и прочее...)
Буду очень благодарен!
import React, { Component } from 'react'
import {gameBlock} from './api'
import {calculateWinner} from './checkWin'
class TicTac extends Component {
constructor (props) {
super(props)
this.state = {
gameBlock,
current: 0
}
}
addCymeriad = (index) => {
let gameBlock = this.state.gameBlock
let current = this.state.current
if (calculateWinner(gameBlock) === 'X' ) return
if (calculateWinner(gameBlock) === '0' ) return
if (gameBlock[index] === 'X') return
if (gameBlock[index] === '0') return
if (current % 2 === 0) {
gameBlock[index] = 'X'
} else {
gameBlock[index] = '0'
}
this.setState({gameBlock: gameBlock, current: this.state.current + 1})
calculateWinner(gameBlock)
}
nextPlayer = () => {
if (this.state.current % 2 === 0) {
return 'X'
} else {
return '0'
}
}
startGame = () => {
let gameBlock = this.state.gameBlock
for (let i = 0; i < gameBlock.length; i++) {
gameBlock[i] = ''
this.setState({gameBlock: this.state.gameBlock, current: 0})
}
}
render() {
const gameBlockList = this.state.gameBlock.map((item, index) => {
return <div onClick={this.addCymeriad.bind(null, index)} key={index} className='game__block'>{item}</div>
})
const winner = calculateWinner(gameBlock)
const player = this.nextPlayer()
return (
<div>
<div className="game">
{gameBlockList}
<p className='win'>Победитель: {winner}</p>
<input onClick={this.startGame} value='Начать заново' type="button" className="start__game"/>
</div>
<div className="nextPlayer">
Следующий игрок: {player}
</div>
</div>
);
}
}
export default TicTac;
И функция calculateWinner
export function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
]
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i]
if (
squares[a] &&
squares[a] === squares[b] &&
squares[a] === squares[c]
) {
return squares[a]
}
}
return null
}
Из того, что сразу бросается в глаза:
1) В функции startGame
творится ад.
Создаем let gameBlock = this.state.gameBlock
, и gameBlock
- не
массив, а ссылка на массив. И когда мы в него записываем значение
gameBlock[i] = ''
, то меняем значение в this.state (руками и ногами в стейт лучше не лазить).
Делать setState()
на каждую итерацию цикла - не лучшее решение.
Можно сделать так([].map()
- возвращает новый массив, а не изменяет используемый):
this.setState({gameBlock: this.state.gameBlock.map(block => ''), current: 0})
2) Использовать диструктуризацию:
let gameBlock = this.state.gameBlock
let current = this.state.current
Поменять на
let {gameBlock, current} = this.state
3) Использовать es6 синтаксис для указания свойств объекта
this.setState({gameBlock: gameBlock})
На
this.setState({gameBlock})
4) Arrow function
(item, index) => { return <div> ... </div>}
Тоже самое что и
(item, index) => <div> ... </div>
5) Если функция calculateWinner
будет выполняться 4-5 секунды, сколько потеряете на такой проверки времени?
if (calculateWinner(gameBlock) === 'X' ) return
if (calculateWinner(gameBlock) === '0' ) return
6) Использовать prettier, linter что бы код был в одном стиле, индентации
className="game"
className='win'
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
нужна помощь в регулярном выражении а именно: Вот так скрипт работает в норме:
Как добавить произвольное поле к записи, чтобы оно отображалось на сайте и в админке?