Теперь, если вы кликнете по Square, то увидите «клик» в консоли инструментах разработки браузера.
\n\nПримечание
\nЧтобы избежать странного поведения
\nthis, мы будем использовать синтаксис стрелочных функций для обработчиков событий (здесь и ниже):\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('клик')}> {this.props.value}\n </button>\n );\n }\n}
\n\nОбратите внимание что в
\nonClick={() => console.log('клик')}, мы передаём функцию в качестве значения пропаonClick. React вызовет эту функцию при клике. Пропуск() =>и записьonClick={console.log('клик')}довольно распространённая ошибка. Такой код будет выдавать сообщение при каждом перерендере.
Следующим шагом мы хотим, чтобы компонент Square «запоминал», что по нему кликнули и поставили «X».\nДля «запоминания» компоненты используют состояние.
\nКомпоненты React могут получить состояние, устанавливая this.state в конструкторе. this.state должно рассматриваться как приватное свойство React-компонента, определяемое им самим. Давайте сохраним текущее значение Square в this.state и изменим его при клике.
Сперва добавим конструктор к классу, чтобы инициализировать состояние:
\nclass Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('клик')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nПримечание
\nВ JavaScript-классах вам всегда нужно вызывать
\nsuperпри объявлении конструктора подкласса. Все классовые React-компоненты, у которых естьconstructor, должны начинаться с вызоваsuper(props).
Теперь изменим метод render компонента Square для отображения текущего значения из состояния при клике:
- \n
- Заменим
this.props.valueнаthis.state.valueвнутри тега<button>. \n - Заменим обработчик
onClick={...}наonClick={() => this.setState({value: 'X'})}. \n - Поместим свойства
classNameиonClickна разных строчках для лучшей читабельности. \n
После этих изменений тег <button>, возвращаемый из метода render компонента Square, будет выглядеть так:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}Вызывая this.setState из обработчика onClick (как это описано в методе render), мы говорим React, что нужно перерендерить Square при каждом клике по <button>. После обновления, this.state.value внутри Square станет X, поэтому на игровом поле мы увидим X. Если вы кликнете по любому Square, должен появиться X.
Когда вы вызываете setState внутри компонента, React так же автоматически обновляет дочерние компоненты.
Посмотреть полный код этого шага
\nИнструменты разработки
\nРасширение React Devtools для Chrome и Firefox позволяет вам изучать дерево React-компонентов внутри панели инструментов разработчика вашего браузера.
\n\n \n \n \n \n![\"React](\"/static/41330fe61a925e2c3009be675bdb96a9/f2205/devtools.png\" "\\"\\"")
\n \n \n \n \n \nРасширение React DevTools позволяет просматривать пропсы и состояние ваших React-компонентов.
\nПосле установки React DevTools, вы можете кликнуть правой кнопкой мыши на любой элемент страницы и нажать Inspect (Просмотреть код), чтобы открыть инструменты разработчика. Вкладки React («⚛️ Components» и «⚛️ Profiler») появятся справа. Используйте вкладку «⚛️️ Components» для просмотра дерева компонентов.
Внимание, чтобы это работало на CodePen нужно сделать ещё несколько действий:
\n- \n
- Войти или зарегистрироваться и подтвердить вашу электронную почту (требуется для защиты от спама). \n
- Нажать кнопку «Fork». \n
- Нажать «Change View» и выбрать «Debug mode». \n
- В открывшейся новой вкладке у вас должны появиться инструменты разработчика. \n
Создание игры
\nТеперь у нас есть базовые элементы для создания игры крестики-нолики. Для полноценной игры нам необходимо реализовать поочерёдное размещение «X» и «O», а также способ определения победителя.
\nПодъём состояния
\nСейчас каждый компонент Square хранит в себе состояние игры. Для выявления победителя мы будем хранить значение всех 9 клеток в одном месте.
\nВозможно, вы предполагали, что Board просто запросит у каждого Square его состояние. Хотя такой подход в React возможен, мы его не одобряем. Из-за этого код становится трудным, провоцирует ошибки и усложняет рефакторинг. Вместо этого, лучшим решением будет хранение состояния игры в родительском компоненте Board, а не в каждом отдельном Square. Компонент Board может указывать каждому Square, что именно нужно отобразить, передавая проп. Мы так уже делали, когда передавали число в каждую клетку.
Чтобы собрать данные из нескольких дочерних элементов, или чтобы дать возможность двум компонентам общаться, вам нужно объявить общее состояние внутри родительского компонента. Родительский компонент может передать состояние обратно дочерним элементам с помощью пропсов. Это поддерживает синхронизацию дочерних компонентов друг с другом и с родительским компонентом.
\nПодъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов. Давайте воспользуемся случаем и попробуем это сделать.
\nДобавим конструктор к компоненту Board и установим начальное состояние в виде массива из 9 элементов, заполненного значениями null. Эти 9 элементов соответствуют 9 квадратам:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }Позже, при заполнении поля, массив this.state.squares будет выглядеть примерно так:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]Метод renderSquare внутри Board сейчас выглядит так:
renderSquare(i) {\n return <Square value={i} />;\n }Вначале мы передали из Board проп value вниз, чтобы отобразить номера от 0 до 8 внутри каждого Square. На другом шаге мы заменили числа знаком «X», определённом в собственном состоянии Square. Именно поэтому сейчас Square игнорирует проп value, переданный в него из Board.
Мы снова воспользуемся механизмом передачи пропсов. Изменим Board, чтобы передать каждому Square его текущее значение ('X', 'O' или null). Мы уже определили массив squares в конструкторе Board. Давайте изменим метод renderSquare, чтобы читать данные из этого массива:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }Посмотреть полный код этого шага
\nТеперь каждый Square получает проп value, который будет, либо 'X' или 'O', либо null для пустых клеток.
Дальше нам нужно поменять то, что происходит при клике на Square. Теперь компонент Board хранит информацию о заполненных клетках. Нам нужен способ, которым Square сможет обновлять состояние Board. Поскольку состояние является приватным для компонента, где оно определено, мы не можем обновить состояние Board напрямую из Square.
\nВместо этого, давайте передадим из Board в Square функцию, и будем её вызывать из Square, когда по тому кликнули. Изменим метод renderSquare в Board-компоненте на:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nПримечание
\nМы разбили возвращаемый элемент на несколько строк для удобства чтения и добавили скобки, чтобы JavaScript не вставлял точку с запятой после
\nreturnи не ломал наш код.
Теперь мы передаём вниз два пропса из Board в Square: value и onClick. Проп onClick — это функция, которую Square вызывает при клике. Внесём следующие изменения в компонент Square:
- \n
- Заменим
this.state.valueнаthis.props.valueвнутри методаrender. \n - Заменим
this.setState()наthis.props.onClick()внутри методаrender. \n - Удалим
constructorиз Square, потому что компонент больше не отвечает за хранение состояния игры. \n
После этих изменений компонент Square выглядит так:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}При клике на Square вызывается функция onClick, которая была передана из Board. Вот как это происходит:
- \n
- Проп
onClickна встроенном DOM-компоненте<button>указывает React установить обработчик события. \n - При клике по кнопке, React вызовет обработчик
onClick, который определён в методеrender()Square. \n - Этот обработчик вызовет
this.props.onClick(). ПропonClickопределён для Square внутри Board. \n - Т.к. Board передаёт в Square
onClick={() => this.handleClick(i)}, Square при клике вызываетhandleClick(i)у Board. \n - Мы пока не определили метод
handleClick(), поэтому наш код сломается. Если вы сейчас кликнете на клетку, вы увидите красный экран с ошибкой вродеthis.handleClick is not a function. \n
\n\nПримечание
\nАтрибут
\nonClickDOM-элемента<button>имеет для React особое значение, потому что это встроенный компонент. Для обычных компонентов вроде Square вы можете называть пропсы как угодно. Мы можем назвать проп SquareonClickи метод для BoardhandleClickлюбым именем, и они будут работать так же. Но в React есть соглашение об именах —on[Имя события]для пропсов, отвечающих за события, иhandle[Имя события]для методов обрабатывающих события.
При клике на Square мы должны получить ошибку, потому что метод handleClick ещё не определён. Давайте добавим его в класс Board:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Следующий ход: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Посмотреть полный код этого шага
\nПосле этих изменений мы снова можем заполнять клетки по клику. Однако теперь состояние хранится внутри компонента Board, а не в разрозненных компонентах Square. При изменении состояния Board произойдёт повторный рендер компонентов Square. Хранение состояния всех клеток внутри компонента Board позволит в будущем определить победителя.
\nПоскольку компоненты Square больше не содержат состояния, они получают все значения из Board и уведомляют его при кликах. В терминах React компонент Square теперь является управляемым. Им полностью управляет Board.
\nОбратите внимание, что внутри handleClick мы вызвали .slice() для создания копии массива squares вместо изменения существующего массива. В следующей части мы объясним зачем создавать копию массива squares.
Почему иммутабельность так важна?
\nВ последнем примере мы советовали использовать метод .slice() для создания и последующего копирования копии массива squares вместо изменения существующего. Теперь мы обсудим иммутабельность и почему её так важно изучить.
В целом есть два подхода к изменению данных. Первый подход — мутировать(изменять) данные, напрямую устанавливая новые значения. Второй подход — заменять данные новой копией, которая содержит изменения.
\nМутирующее изменение данных
\nvar player = {score: 1, name: 'Джефф'};\nplayer.score = 2;\n// Теперь player имеет значение {score: 2, name: 'Джефф'}Изменение данных без мутаций
\nvar player = {score: 1, name: 'Джефф'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// Здесь `player` не изменился, а в `newPlayer` находится {score: 2, name: 'Джефф'}\n\n// Или, если вы пользуетесь синтаксисом расширения объектов, вы можете написать:\n// var newPlayer = {...player, score: 2};Конечный результат будет тот же, но без мутации (т.е. изменения) исходных данных напрямую. Ниже описаны преимущества такого подхода.
\nСложное становится простым
\nИммутабельность делает реализацию сложной функциональности проще. Ниже мы реализуем функциональность «путешествие во времени», которая позволит хранить историю игры и «возвращаться» к прошлым ходам. Эта функциональность не характерна для игр, однако, возможность отменять и заново применять действия часто встречается в приложениях. Избежание прямой мутации данных позволяет сохранять предыдущие состояния игры без изменений и обращаться к ним позже.
\nОбнаружение изменений
\nРаботая с мутируемыми объектами довольно сложно обнаружить изменения, потому что они изменяются напрямую. В таком случае нам требуется сравнивать объект как со своей последней копией, так и со всем деревом объектов.
\nОбнаружение изменений в иммутабельных объектах намного проще. Если неизменяемый объект, на который ссылаются, отличается от предыдущего, то объект изменился.
\nКак React понимает, когда нужно перерендерить
\nОсновным преимуществом иммутабельности является то, что она помогает создавать в React чистые компоненты. Неизменяемые данные позволяют легко определить наличие изменений и момент, когда компонент нужно перерендерить.
\nВы можете узнать больше о shouldComponentUpdate() и как создавать чистые компоненты в статье про оптимизацию производительности.
Функциональные компоненты
\nДавайте сделаем Square функциональным компонентом.
\nВ React функциональные компоненты являются более простым способом написания компонентов, которые содержат только метод render и не имеют собственного состояния. Вместо определения класса, который наследуется от React.Component, мы можем написать функцию, которая принимает на вход props и возвращает то, что должно быть отрендерено. Функциональные компоненты проще писать, чем классы, и многие компоненты могут быть оформлены таким образом.
Заменим класс Square следующей функцией:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}Мы заменили this.props на props оба раза, когда обращались к ним.
Посмотреть полный код этого шага
\n\n\nПримечание
\nКогда мы заменили Square на функциональный компонент, мы также изменили
\nonClick={() => this.props.onClick()}на более короткоеonClick={props.onClick}(обратите внимание на отсутствие скобок с обеих сторон).
Очерёдность
\nНам нужно исправить одну очевидную проблему в нашей игре — на поле нельзя поставить «O».
\nПо-умолчанию установим первый ход за «X». Мы можем сделать это, изменяя начальное состояние внутри конструктора Board:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }Каждый раз, когда игрок делает ход, xIsNext (булево значение) будет инвертироваться, чтобы обозначить, какой игрок ходит следующим, а состояние игры будет сохраняться. Мы обновим метод handleClick класса Board, для инверсии значения xIsNext:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }После этих изменений «X» и «O» будут чередоваться. Попробуйте.
\nДавайте также изменим текст «status» в методе render класса Board так, чтобы он отображал какой игрок ходит следующим:
render() {\n const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // остальное не изменилосьПосле этих изменений наш Board-компонент должен выглядеть так:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Посмотреть полный код этого шага
\nОпределение победителя
\nТеперь, когда мы показываем, какой игрок ходит следующим, нам также нужно показать, когда игра закончена, и больше нет ходов. Скопируйте вспомогательную функцию в конец файла:
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}Функция получает массив из 9 клеток, проверяет победителя и возвращает 'X', 'O' или null.
Будем вызывать calculateWinner(squares) внутри метода render класса Board, чтобы проверять, выиграл ли игрок. Если у нас есть победитель, мы покажем сообщение «Выиграл X» или «Выиграл O». Заменим объявление status в render следующим кодом:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Выиграл ' + winner; } else { status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // остальное не изменилосьТеперь мы можем изменить метод handleClick класса Board для выхода из функции и игнорировании клика, если кто-то уже победил или если клетка уже заполнена:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }Посмотреть полный код этого шага
\nПоздравляем! Теперь у вас есть работающая игра в крестики-нолики. И кроме этого вы только что изучили основы React. Похоже, настоящий победитель здесь это вы.
\nДобавление путешествия во времени
\nВ качестве последнего упражнения давайте добавим возможность «вернуться в прошлое» — к прошлым ходам игры.
\nСохраняем историю ходов
\nЕсли бы мы изменяли массив squares, реализация такой задачи была бы очень трудной.
Но мы использовали slice() для создания новой копии массива squares после каждого хода и работали с ним, не изменяя оригинала. Это позволит нам хранить каждую версию массива squares и перемещаться по ходам, которые уже были сделаны.
Сохраним массивы squares в другом массиве и назовём его history. Этот массив history будет хранить все состояния поля. От первого до последнего хода. У него будет такая структура:
history = [\n // Перед первым ходом\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // После первого хода\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // После второго хода\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]Осталось решить, какой компонент будет отвечать за состояние history.
Подъём состояния. Снова
\nМы хотим, чтобы вышележащий компонент Game отображал список последних ходов. Для этого ему понадобится доступ к history, поэтому мы поместим history в состояние родительского компонента Game.
Размещение history в состоянии компонента Game позволяет нам удалить squares из состояния его дочернего компонента Board. Так же, как мы уже «поднимали состояние» из компонента Square в Board, мы теперь поднимем его из Board в компонент-родитель Game. Это даст компоненту Game полный контроль над данными Board и позволит отдавать команду для Board на рендеринг прошлых ходов из history:
Для начала зададим начальное состояние компонента Game внутри конструктора:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}После этого нужно, чтобы Board получил пропсы squares и onClick из компонента Game. Поскольку внутри Board у нас один обработчик кликов для всех Squares, нам достаточно передать позицию для каждого Square в обработчик onClick, чтобы показать по какой клетке мы кликнули. Для изменения компонента Board нам нужно выполнить следующие шаги:
- \n
- Удалить
constructorв Board. \n - Заменить
this.state.squares[i]наthis.props.squares[i]в методеrenderSquareBoard. \n - Заменить
this.handleClick(i)наthis.props.onClick(i)в методеrenderSquareBoard. \n
Теперь компонент Board должен выглядеть вот так:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Выиграл ' + winner;\n } else {\n status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Давайте обновим метод render компонента Game, чтобы использовать последнюю запись из истории для определения и отображения статуса игры:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Выиграл ' + winner; } else { status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }Поскольку компонент Game теперь рендерит статус игры, мы можем убрать соответствующий код из метода render внутри Board. После изменений метод render компонента Board выглядит так:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }Наконец, нужно перенести метод handleClick из компонента Board в компонент Game. Мы также должны изменить handleClick, потому что состояние компонента Game имеет другую структуру. В методе handleClick компонента Game мы добавим новые записи истории в history.
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nПримечание
\nВ отличие от метода массива
\npush(), с которым вы должно быть знакомы, методconcat()не изменяет оригинальный массив, поэтому мы предпочтём его.
Теперь компоненту Board нужно только два метода — renderSquare и render. Состояние игры и handleClick должны находиться внутри компонента Game.
Посмотреть полный код этого шага
\nПоказываем прошлые ходы
\nПоскольку мы записываем ход игры, мы теперь можем показать игроку список предыдущих ходов.
\nРанее мы узнали, что React-элементы — это обычные объекты JavaScript. Мы можем передавать их внутри нашего приложения. Для рендера нескольких записей в React мы можем использовать массив React-элементов.
\nВ JavaScript у массивов есть метод map(), который обычно используется для преобразования данных. Например:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]Используя метод map, мы можем отобразить историю наших ходов в React-элементы, представленные кнопками на экране, и отрисовать список кнопок для «перехода» к прошлым ходам.
Давайте применим map к history внутри метода render Game-компонента:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Перейти к ходу #' + move : 'К началу игры'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Выиграл ' + winner;\n } else {\n status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }Посмотреть полный код этого шага
\nПри итерации по массиву history, переменная step содержит текущее значение элемента history, а move — текущий индекс элемента history. Поскольку нам нужен только move, то step не используется.
Для каждого хода в истории игры мы создаём элемент списка <li>, который содержит кнопку <button>. У кнопки есть обработчик onClick, который вызывает метод this.jumpTo(). Мы ещё не реализовали этот jumpTo() метод. Пока что мы должны видеть только список ходов, которые были сделаны в игре и вот такое предупреждение в инструментах разработчика:
\n\nWarning:\nEach child in an array or iterator should have a unique «key» prop. Check the render method of «Game».
\n
Что переводится как:
\n\n\nПредупреждение:\nКаждый элемент в массиве или итераторе должен иметь уникальный проп «key». Проверьте метод render в Game
\n
Давайте обсудим, что это предупреждение значит.
\nВыбор ключа
\nКогда мы рендерим список, React хранит информацию о каждом отрендеренном элементе списка. Если мы обновляем список, React должен понять, что в нём изменилось. Мы могли добавить, удалить, поменять порядок или обновить элементы списка.
\nПредставим изменения от
\n<li>Алекс: 7 задач осталось</li>\n<li>Бен: 5 задач осталось</li>к
\n<li>Бен: 9 задач осталось</li>\n<li>Клава: 8 задач осталось</li>\n<li>Алекс: 5 задач осталось</li>В дополнении к изменённым цифрам, человек, читающий это, вероятно, сказал бы что Алекс и Бен поменялись местами, а между ними вставили Клаву. Но React — это компьютерная программа, и она не знает чего мы хотим, поэтому нам нужно указать свойство key для каждого элемента списка, чтобы отличать каждый элемент от остальных. Один из вариантов — использовать строки Алекс, Бен, Клава. Если мы показываем информацию из базы данных, то в качестве ключей мы могли бы использовать идентификаторы из базы.
<li key={user.id}>{user.name}: {user.taskCount} задач осталось</li>При повторном рендеринге списка, React берёт у каждого элемента списка ключ и ищет его в элементах прошлого списка. Если в новом списке есть ключ, которого раньше не было, React создаёт новый компонент. Если в текущем списке отсутствует ключ, который был в прошлом списке, React уничтожает предыдущий компонент. Если два ключа совпадают, соответствующий компонент перемещается. Ключи в React работают как идентификаторы для каждого компонента, что помогает React поддерживать состояние между повторными рендерингами. Если у компонента меняется ключ, компонент будет уничтожен и создан вновь с новым состоянием.
\nkey — это специальное зарезервированное свойство в React (наряду с ref, более продвинутой функциональностью). Когда элемент создан, React извлекает свойство key и сохраняет этот ключ непосредственно в возвращаемом элементе. Хотя key выглядит как пропс, к нему нельзя обращаться через this.props.key. React автоматически использует key для определения того, какой компонент должен обновиться. Компонент не может узнать о своём ключе.
Настоятельно рекомендуется использовать правильные ключи каждый раз, когда вы строите динамические списки. Если у вас нет подходящего ключа, можно подумать о реструктуризации ваших данных, чтобы он у вас появился.
\nЕсли ключ не был определён, React покажет предупреждение и по умолчанию использует индекс элемента в массиве в качестве ключа. Использование индексов массива может вызвать проблемы при попытке отсортировать элементы списка или при вставке/удалении элементов. Явная передача key={i} отключает предупреждение, но вызывает те же проблемы, связанные с индексами массивов, так что в большинстве случаев лучше так не делать.
Ключи не обязательно должны быть уникальными глобально. Они должны быть уникальными только между компонентами и их братьями и сёстрами.
\nРеализация путешествия во времени
\nВ истории игры крестики-нолики каждый прошлый ход имеет уникальный идентификатор: это номер хода в последовательности. Ходы никогда не меняют свой порядок, не удаляются и не добавляются в середину последовательности, так что вполне безопасно пользоваться индексом в качестве ключа.
\nВ методе render компонента Game мы можем добавить ключ следующим образом <li key={move}> и предупреждения от React об отсутствующих ключах должны пропасть:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Перейти к ходу #' + move :\n 'К началу игры';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });Посмотреть полный код этого шага
\nКлик на любой кнопке из списка выбросит ошибку, потому что метод jumpTo не определён. Прежде чем реализовывать jumpTo, мы добавим stepNumber в состояние компонента Game, для указания номера хода, который сейчас отображается.
Сначала добавим stepNumber: 0 в начальное состояние Game внутри constructor:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }Далее, мы определим метод jumpTo в компоненте Game для обновления stepNumber. Мы также установим xIsNext в true, если номер хода, на который мы меняем stepNumber, чётный:
handleClick(i) {\n // Этот метод не изменялся\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // Этот метод не изменялся\n }Обратите внимание, что в методе jumpTo мы не обновили свойство history состояния. Это потому, что обновления состояния объединяются или, проще говоря, React обновит только те свойства, которые были указаны в методе setState без изменения остальных свойств. Подробнее об этом читайте в документации.
Мы сделаем ещё несколько изменений в методе Game handleClick, который выполняется когда вы кликаете на клетки.
Добавленный нами stepNumber указывает номер хода, отображающегося пользователю. Когда мы делаем очередной ход, нам нужно обновить stepNumber используя stepNumber: history.length как часть аргумента для this.setState. Это гарантирует, что мы не застрянем, показывая одно и то же после того, как был сделан новый ход.
Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1). Это гарантирует, что если мы «вернёмся назад», а затем сделаем новый шаг из этой точки, мы удалим всю «будущую» историю, которая перестала быть актуальной.
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }Наконец, мы изменим метод render для Game, чтобы вместо рендера последнего хода он рендерил ход, соответствующий stepNumber:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // Остальной код не менялсяЕсли мы кликнем на любой ход в игровой истории, поле должно немедленно обновиться, показывая как оно выглядело после этого хода.
\nПосмотреть полный код этого шага
\nПодводя итоги
\nПоздравляем! Вы только что создали игру в крестики-нолики, которая:
\n- \n
- Позволяет вам играть в крестики нолики, \n
- Показывает, когда один из игроков выиграл, \n
- Хранит историю игры, \n
- Позволяет игрокам просматривать историю игры и видеть прошлые состояния игрового поля. \n
Хорошая работа! Мы надеемся, вы чувствуете уверенность в своих знаниях о том, как работает React.
\nПосмотреть готовую игру вы можете здесь: Готовый результат.
\nЕсли у вас есть дополнительное время или вы хотите попрактиковать свои новые навыки в React, вот пара идей для улучшений, которые вы можете внедрить в крестики-нолики (перечислены в порядке увеличения сложности):
\n- \n
- Отобразите позицию для каждого хода в формате (колонка, строка) в списке истории ходов. \n
- Выделите выбранный элемент в списке ходов. \n
- Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования. \n
- Добавьте переключатель, который позволит вам сортировать ходы по возрастанию или по убыванию. \n
- Когда кто-то выигрывает, подсветите три клетки, которые привели к победе. \n
- Когда победителя нет, покажите сообщение о том, что игра окончилась вничью. \n
В этом вводном руководстве мы затронули концепции React, включая элементы, компоненты, пропсы и состояние. Для более детального ознакомления с каждой из этих тем обратитесь к остальной документации. Чтобы узнать больше про объявление компонентов изучите Документацию по API React.Component.