Неизменность в реакции

В моей предыдущей статье я писал о том, как и почему неизменяемость . Я утверждал, что одна из областей, в которой неизменность действительно сияет, — это отслеживание изменений, одна из больших проблем в современных интерфейсных средах. В этой статье я приведу пример того, как неизменность можно использовать с React , библиотекой, разработанной Facebook.

Эта статья не будет обсуждать основы React. Если вам нужно введение в эту библиотеку, вы можете прочитать статью Введение в библиотеку React JavaScript .

Как использовать неизменяемость в React

В моей предыдущей статье я реализовал основную игровую логику для Minesweeper. В этой статье мы рассмотрим уровень пользовательского интерфейса. Есть несколько ошибок, которые мы должны учитывать при использовании объектов immutable.js с React. Во-первых, вы не можете передать неизменяемую карту или список непосредственно компоненту React, например так:

var data = Immutable.Map();
React.render(MyComponent(data), element);

Причина, по которой это не работает, заключается в том, что React копирует содержимое этого свойства объекта по свойству и объединяет его с существующим props Это означает, что React не получит неизменный экземпляр. Он также не получит данные, содержащиеся на карте, потому что он не отображается как свойства объекта — у вас есть доступ к данным с помощью метода get()

Решение простое:

 var data = Immutable.Map();
React.render(MyComponent({data: data}), element);

В этой статье все компоненты будут работать с неизменяемыми данными, поэтому мы создадим небольшую оболочку, чтобы избежать повторения этого снова и снова:

 function createComponent(def) {
  var component = React.createFactory(React.createClass(def));
  return function (data) {
    return component({data: data});
  };
}

С этим компонентом мы можем забыть об обёртке, пока нам не понадобится доступ к ней в функции render()this.props.data Наши компоненты будут определять только функцию render()

 function createComponent(render) {
  var component = React.createFactory(React.createClass({
    render: function () {
      return render(this.props.data);
    }
  }));

  return function (data) {
    return component({data: data});
  };
}

Благодаря этому определение и использование компонентов, которые работают с неизменяемыми данными, очень просто:

 var div = React.DOM.div;

var Tile = createComponent(function (tile) {
  if (tile.get('isRevealed')) {
    return div({className: 'tile' + (tile.get('isMine') ? ' mine' : '')},
               tile.get('threatCount') > 0 ? tile.get('threatCount') : '');
  }

  return div({
    className: 'tile'
  }, div({className: 'lid'}, ''));
});

Если плитка раскрыта, мы делаем мину, если она есть; в противном случае мы визуализируем количество близлежащих мин, за исключением случаев, когда это число равно 0. Если мина не обнаружена, мы просто визуализируем ее с «крышкой», которая в CSS будет выглядеть как кликабельная плитка.

Остальные компоненты React также просты. Есть еще одна загвоздка, о которой нужно знать. Реактивные компоненты могут принимать массив дочерних компонентов. Мы должны убедиться, что неизменяемые списки преобразованы в массивы, прежде чем передать их в React:

 var Row = createComponent(function (tiles) {
  return div({className: 'row'}, tiles.map(Tile).toJS());
});

Вызов map()toJS() Эти и другие компоненты пользовательского интерфейса можно полностью увидеть в этом коде, где вы также можете поиграть в игру.

Ускорение вещей

В моей предыдущей статье я упоминал, что отслеживание изменений может быть значительно улучшено, потому что мы можем закорачивать дорогой алгоритм сравнения в таких библиотеках, как React. Когда вы даете React новые данные, он вызывает shouldComponentUpdate() Если эта функция возвращает false Это потенциально экономит много работы и может привести к значительному улучшению производительности.

Давайте рассмотрим нашу игру. Когда вы открываете плитку, вся игра отображается заново. Однако, благодаря нашей неизменной модели данных, все плитки, которые не изменились, по-прежнему будут такими же точными ссылками. Их не нужно повторно отображать, потому что с неизменяемыми данными одна и та же ссылка означает отсутствие изменений. Чтобы сообщить React об этой детали, мы можем улучшить нашу оболочку компонента следующим образом:

 function createComponent(render) {
  var component = React.createFactory(React.createClass({
    shouldComponentUpdate: function (newProps, newState) {
      // Simplified, this app only uses props
      return newProps.data !== this.props.data;
    },

    render: function() {
      return render.call(this, this.props.data);
    }
  }));

  return function (data) {
    return component({data: data});
  };
}

Этого простого кода достаточно, чтобы наше приложение не было значительно медленнее, чем приложение, основанное на изменяемых данных, и почти вдвое быстрее. Вот как много влияет эффективное отслеживание изменений! Эта улучшенная версия также доступна на CodePen . Если вы хотите взглянуть поближе на некоторые цифры, есть также репозиторий GitHub , который включает в себя несколько грубых тестов и несколько реализаций.

 var newGame = revealTile(game, tile);

if (newGame !== game) {
  gameHistory = gameHistory.push(newGame);
  game = newGame;
}

render();

 var UndoButton = createComponent(function () {
  return React.DOM.button({
    onClick: function () {
      channel.emit('undo');
    }
  }, 'Undo');
});

 channel.on('undo', function () {
  if (history.size > 1) {
    gameHistory = gameHistory.pop();
    game = gameHistory.last();
    render();
  }
});