Что такое неизменные данные
Необываемые данные относятся к данным, которые не могут быть изменены после их создания.
Используя неизменные данные, мы можем легко справиться с кэшированием, отступлением, обнаружением изменений данных и другими проблемами, а также упростить нашу разработку.
Неизменные данные в JS
В JavaScript мы можем моделировать неизменные данные с помощью глубокого клона, что означает, что каждый раз, когда мы работаем в данных, мы будем использовать глубокие клоны данных для создания новых данных.
глубокий клон
/** * Изучение обучения-клон-deep.js * Создан MDS 15/6/6. */'использовать строгое'; var cloneeep = require ('lodash.cloneeep'); var data = {id: 'data', автор: {name: 'mdemo', github: 'https://github.com/demohi'}}; var data1 = cloneep (data); console.log ('ровно:', data1 === data); //falsedata1.id = 'data1'; data1.author.name = 'demohi'; console.log (data.id); // консоль данных.Конечно, вы можете понять, что это очень медленно. Как показано ниже, это действительно очень медленно
Immutable.js - это проект, открытый Facebook. В основном это решить проблему непотимых данных JavaScript. Это обеспечивает более эффективный способ, ссылаясь на хеш -карты и векторные попытки.
Проще говоря, Immutable.js решает проблемы производительности посредством структурного обмена. Давайте сначала посмотрим видео, чтобы увидеть, как сделано неизменное.js
Когда происходит установленная операция, Immutable.js будет клонировать только части над его родительским уровнем, а другие останутся неизменными, чтобы каждый мог поделиться одними и теми же частями, что может значительно повысить производительность.
Любой, кто знаком с React.js, должен знать, что React.js - это структура с ui = f (состояния). Чтобы решить проблему обновления, React.js использует виртуальный DOM. Virtual DOM использует Diff для изменения DOM для достижения эффективных обновлений DOM.
Это звучит идеально, но есть одна проблема. Когда состояние обновляется, если данные не изменяются, вы также будете делать виртуальную DOM DIFF, что вызовет отходы. Эта ситуация на самом деле очень распространена, пожалуйста, обратитесь к статье Flummox
Конечно, вы можете сказать, что вы можете использовать Purerendermixin для его решения. Purerendermixin - это хорошая вещь, мы можем использовать его для решения некоторых из вышеперечисленных проблем, но если вы обратите внимание, вы можете увидеть следующее подсказку в документе.
Кода -копия выглядит следующим образом:
Это только неглубого сравнивает объекты. Если они содержат сложные структуры данных, это может привести к ложном негативным средствам для более глубоких различий. Смешайте только компоненты, которые имеют простой реквизит и состояние или используйте ForceUpdate (), когда вы знаете, что глубокие структуры данных изменились. Или рассмотрите возможность использования неизменных объектов для облегчения быстрого сравнения вложенных данных.
Purerendermixin-это просто простое мелкое сравнение и не используется для многослойных сравнений. Что я должен делать? ? Если вы самиете сложные сравнения, производительность будет очень плохой.
Решение состоит в том, чтобы использовать Immutable.js для решения этой проблемы. Поскольку до тех пор, пока в каждом обновлении состояния наблюдается изменение данных, Purerendermixin может немедленно определить изменение данных, что может значительно повысить производительность. Эту часть также можно найти в официальном документе, помощниках об неизменности
Резюме: используйте PurerenderMixin + Immutable.js
React.js conf 2015 - Неизвестные данные и реагируйте
Помощники неизменности
Purerendermixin
Необычный JS