Крестики-нолики на React

136
29 апреля 2018, 20:51

Доброе утро, сограждане. Оцените мой код (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
}
Answer 1

Из того, что сразу бросается в глаза:

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'
READ ALSO
Помощь в регулярном выражени

Помощь в регулярном выражени

нужна помощь в регулярном выражении а именно: Вот так скрипт работает в норме:

146
PHP работа с файлом

PHP работа с файлом

Есть обычный текстовый документ ttxt

162
Проблема с кодировкой при выводе из БД

Проблема с кодировкой при выводе из БД

Есть таблица в БДВ ней есть значение на кириллице

205
Как добавить произвольное поле к записи, чтобы оно отображалось на сайте и в админке?

Как добавить произвольное поле к записи, чтобы оно отображалось на сайте и в админке?

Как добавить произвольное поле к записи, чтобы оно отображалось на сайте и в админке?

197