React.js (8) Отладка

Все статьи по React.js

Если вы точно воспроизвели данный код у себя на машине, то могли заметить, что смена статей при нажатии на кнопку происходит один раз в два клика. То есть нажимаем один раз - ничего не происходит. нажимаем второй раз - меняется порядок статей.

Давайте разберемся. что у нас пошло не так и заодно научимся отладке React приложений.

В каждом случае, когда у вас идет то-то не так, вам нужно просто вспомнить как работает React и повторить за ним эти шаги.

В нашем случае, все что у нас произойдет - в какой-то момент по клику (1) на кнопку вызовется collback (2) он поменяет состояние и это должно привести к перестроению виртуального DOM и это внесет изменения в реальный DOM.

Давайте проверим все ли работает у нас так, как задумано?

В первую очередь нас интересует вызывается ли этот collback(2)?

Нам для этого ненужны какие-то специальные средства отладки. просто добавим console.log('---',1); в эту функцию.

следующим этапом, если все пойдет правильно, то у нас вызовется setState() он в любом случае, приведет к перестроению виртуального DOM, и соответственно вызовется метод render().

В него тоже добавим console.log('---',2);

Третье, что может пойти не так - это, теоретически у нас может как-то не так поменяться состояние. В функции render() добавим в console.log('---',2, this.state);

Идем в консоль - Ctrl + Shift + I и видим:

Collback - вызывается, все вызывается и состояние, на самом деле, меняется. Вроде бы все хорошо. Почему же тогда не работает? Давайте проанализируем наш код:

<ArticleList articles={this.state.reverted ?articles.reverse() : articles}/>

В каждый момент времени он получает массив статей. Или перевернутый - ? articles.reverse() или обычный -

: articles

Проблема в том, что метод articles.reverse() не просто возвращает перевернутый массив, но и меняет этот объект по ссылке!. Таким образом, когда мы в следующий момент времени захотим просто передать в ArticleListмассив статей, он уже будет перевернутый.

Чтобы это продемонстрировать мы добавим в вывод консоли (2) articles.map(article => article.id

console.log("---",2, this.state, articles.map(article => article.id))

И для наглядности вынесем действие смены массива ArticleList наверх.

  import React, {Component} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends Component {
    state = {
      reverted: false
    }
    render(){
      const articlesList = this.state.reverted ?articles.reverse() : articles
      console.log("---",2, this.state, articles.map(article => article.id))
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={articlesList}/>
        </div>
      );
    }
      revert = () => {
        console.log("---",1)
       this.setState({
        reverted: !this.state.reverted
      })
    }
  }
  export default App

Давайте посмотрим

Массивы действительно меняются местами, но когда мы нажимаем еще раз, и у нас уже {reverted: false} (2) мы все еще ссылаемся на предыдущий массив с тем же порядком. Соответственно, пока мы его не перевернем в следующий раз. ничего не произойдет.

Попробуем "починить" это "наивным способом".

Добавили articles.reverse()

Таким образом у нас каждый раз будет по клику меняться направление. Даже наш флажок мы оставили без изменений - reverted: !this.state.reverted, потому как он уже ни на что влиять не будет.

В ArticleList мы просто передадим articles. Мы будем их менять по ссылке - <ArticleList articles={articles}/>

Проверим и убедимся, что это избавит нас от этой проблемы. Но на самом деле наша ошибка значительно глубже!

Обратите внимание на то, что мы делаем! Это ужасно!!! Никогда так не делайте!!!

На самом деле сейчас мы по ссылке меняем массив (на скрине сверху обвел красным), который может использоваться где угодно в нашем приложении. Мы же не знаем где еще мы считаем эти articles. Поэтому правило:

Работайте в компонентах с локальными переменными, которые вы видите где используются и как вы с ними взаимодействуете!

Иначе, может получиться так, что вы поменяете переменную в одном месте, а потом не сможете понять, почему соседний компонент работает не так, как вы это задумали! Поэтому->

Никогда не меняйте по ссылке внешние переменные и тем более то, что приходит вам в props

Теперь давайте попробуем исправить ситуацию.

Давайте, при создании компонента, мы создадим локальную копию этого массива.

articles = articles.slice()

И теперь у нас для каждого компонента App будет своя копия articles. И теперь с копией мы можем работать. Нам нужно только добавить this к изменению порядка в функции reverse()->

this.articles.reverse()

и

<ArticleList articles={this.articles}/>

Теперь мы не будем менять глобальную переменную articles, а меняем только то, что "живет" в this.

Уже лучше! И все казалось бы работает нормально, но здесь мы рискуем столкнуться с еще одной проблемой.

Давайте предположим, что мы решили сделать любой наш компонент - PureComponent, соответсвенно, чтобы у нас не происходило лишних перестроений виртуального дерева, когда это не нужно. И заменим Component на PureComponent

import React, {PureComponent} from 'react'

и соответственно -

class App extends PureComponent

И аналогично в файле index.js перепишем ArticleList перепишем с функционального компонента в классовый компонент. И тоже сделаем его PureCompomemt

index.js

  import React, {PureComponent} from 'react'
  import Article from '../Article'
  import './style.css'
  export default class ArticleList extends PureComponent {
    render(){
        const articleElements = this.props.articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
    }
  }

Посмотрим, как это работает. Идем в приложение. Нажимаем на кнопку Revert и ...ничего не происходит!

Почему так?

Давайте пройдемся по нашему алгоритмы.

В первую очередь - в какой момент времени у нас должно было что-то произойти?

В функции revert (App.js) произошло изменение состояния, значит в render, начнется перестроение виртуального дерева.

Ставим проверочный вывод в консоль в самом верху рендера - console.log("---",1)

Затем, в рамках перестроения общего виртуального дерева будет перестраиваться и ArticlaList (index.js) поставим там - console.log("---",2), так же в самом начале рендера. И теперь посомотрим, что происходит у нас в консоле.

В первый раз (1 на фото) - сработали обе функции, потому что DOM дерево строилось в первый раз.

Потом, мы нажали кнопку Revert и у нас сработала только 1 функция (2 на фото)

Если заменить PureComponent на обычный Component, то будут срабатывать обе функции.

Так происходит потому что с точки зрения ArticleList, когда мы будем проверять props в shouldComponentUpdate(), props у нас не поменяются.

Единственный props , который к нам приходит - this.props.articles

Но articles мы меняем по ссылке. Таким образом это всегда один и тот же массив.Соответственно, каждый раз при престроении мы передаем туда ссылку на один и тот же массив и несмотря на то, что внутренние составляющие его поменялись (порядок). Но с точки зрения ArticleList это все тот же массив. И он будет считать, что перестроение делать ненужно!

Это одни из главных причин почему в React настолько популярна работа с иммутабельными данными.

Иммутабельные - это данные, которые вы не меняете по ссылке

Если вам нужно, в какой-то период времени, поменять массив статей, то вы не просто меняете по ссылке какую-то локальную переменную, но вместо этого вы создаете новый массив. И уже этт новый массив будет содержать статьи в таком порядке, в котором вы и хотите.

Соответственно правильным будет вот такое решение!

App.js

  import React, {PureComponent} from 'react'
  import ArticleList from './ArticleList'
  import articles from '../fixtures.js'
  import 'bootstrap/dist/css/bootstrap.css'

  class App extends PureComponent {
    state = {
      reverted: false
    }
    render(){
      console.log('---',1)
      return (
        <div className="container">
          <div className="jumbotron">
            <h1 className="display-3">
                App name
                <button className="btn" onClick = {this.revert}>Revert</button>
            </h1>
          </div>  
            <ArticleList articles={this.state.reverted ? articles.slice().reverse() : articles}/>
        </div>
      );
    }
      revert = () => {
       this.setState({
        reverted: !this.state.reverted
      })
    }
  }
  export default App

Это, почти также как и было в самом начале, но единственное что - это для того, чтобы вы ничего не меняли по ссылке, чтобы articles оставался такой же как и ранее, мы создали копию (articles.slice()) и переворачивали уже копию. Не меняя при этом оригинальный массив.

Вот теперь у нас все будет хорошо!

Никогда не меняйте ничего из внешних переменных!

Никогда не меняйте ничего, что приходит в props!

Лучше, вообще ничего не менять по ссылке, и каждый раз, нужно какое-то изменение, создайте локальную копию и меняйте уже её!

Все статьи по React.js

---

Файлы, которые мы изменяли в этот раз:

App.js ( со всеми изменениями последний на странице)

components/ArticleList/index.js

  import React, {PureComponent} from 'react'
  import Article from '../Article'
  import './style.css'
  export default class ArticleList extends PureComponent {
    render(){
      console.log("---",2)
        const articleElements = this.props.articles.map((article, index) =>
            <li key = {article.id} className="article-list__li">
              <Article article = {article} defaultOpen = {index === 0}/>
            </li>
          )
        return(
            <ul>
              {articleElements}
            </ul>
          );
    }
  }