Страшно ли Immutable.js? Я покажу вам, как начать

внешний интерфейс Facebook Immutable.js

Оригинал -Immutable.js пугает, вот как начать.

Вы знаете из многих источников, что вы должны использоватьImmutable. Вы тоже хотите его использовать, но не знаете, зачем. И когда вы идете к официальномуДокументация, первый фрагмент кода, который бросается в глаза:

identity<T>(value: T): T

Вы думаете: э... давай забудем.

Это простое и краткое руководство, которое поможет вам начать работуImmutableСтатья точно не подведет.

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

Основание

стандартныйjsПреобразование формата данных вImmutable

существуетjs, мы знаем о двух распространенных типах данных:Object{}а такжеArray[].ImmutableИдея:

  • Object{}сталиMapMap({})
  • Array[]сталиListList([])

Чтобы быть более конкретным, используйтеImmutableкоторый предоставилMap,Listа такжеfromJSфункция:

import { Map, List, fromJS } from 'immutable';
// 原生 js 数据类型
const person = {
  name: 'Will',
  pets: ['cat', 'dog']
};
// 等同于 Immutable 中的:
const immutablePerson = Map({
  name: 'Will',
  pets: List(['cat', 'dog'])
});
// 或者 ...
const immutablePerson = fromJS(person);

formJSочень полезная функция, которая преобразует вложенные структуры данных вImmutableобъект. Создается самостоятельно на основе данных в процессе конвертацииMapsа такжеLists.

ImmutableПреобразовать в стандартjsФормат данных

получить отImmutableПолучите ваши критерии от объектаjsформат данных, вам просто нужно позвонитьImmutableобъектtoJSФункция может быть:

import { Map } from 'immutable';
const immutablePerson = Map({ name: 'Will' });
const person = immutablePerson.toJS();
console.log(person); // 打印 { name: 'Will' };

Структуры данных следует считать нативнымиjsструктура данных илиImmutableобъект

начать использоватьImmutable

объясняя почемуImmutableПрежде чем это будет полезно, позвольте мне дать вам три фрагмента кода, чтобы рассказать вамImmutableКак вам помочь.

Получить несуществующее значение данных из вложенной структуры данных

Во-первых, роднойjs:

const data = { my: { nested: { name: 'Will' } } };
const goodName = data.my.nested.name;
console.log(goodName); // 打印 Will
const badName = data.my.lovely.name;
// throws error: 'Cannot read name of undefined'
// 'lovely' 属性不存在，所以报错

посмотри сноваImmutable:

const data = fromJS({ my: { nested: { name: 'Will' } } });
const goodName = data.getIn(['my', 'nested', 'name']);
console.log(goodName); // 打印 Will
const badName = data.getIn(['my', 'lovely', 'name']);
console.log(badName); // 打印 undefined - 不会抛出异常

В приведенном выше примере роднойjsКод выдает исключение, ноImmutableНет.

Это потому, что мы используемgetIn()функция для получения вложенных значений данных. Ключевой путь для значения данных не существует (другими словами, объект не является вложенной структурой, которую вы ожидаете), он просто возвращаетundefinedи никаких исключений не будет.

Вам не нужно вкладываться так, чтобы проверить, существует ли значение данных:

if (data && data.my && data.my.nested && data.my.nested.name) { ...

Эта простая функция делает ваш код более читабельным, лаконичным и надежным.

цепная операция

Во-первых, роднойjs:

const pets = ['cat', 'dog'];
pets.push('goldfish');
pets.push('tortoise');
console.log(pets); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];

посмотри сноваImmutable:

const pets = List(['cat', 'dog']);
const finalPets = pets.push('goldfish').push('tortoise');
console.log(pets.toJS()); // 打印 ['cat', 'dog'];
console.log(finalPets.toJS()); // 打印 ['cat', 'dog', 'goldfish', 'tortoise'];

потому чтоList.pushВозвращает результат после операции, мы можем продолжить позже链式операции, в то время как собственный массивpushФункция возвращает длину нового массива после операции.

Это очень простой пример цепочки операций, но он иллюстрируетImmutableмощные функции.

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

ImmutableОперации над объектами всегда возвращают результат операции

неизменяемые данные

Это называется不可变, поэтому нам нужно обсудить, почему это важно.

Например, вы используетеImmutableОбъект создается и обновляется, но его исходная структура данных остается прежней. Это不可变.

const data = fromJS({ name: 'Will' });
const newNameData = data.set('name', 'Susie');
console.log(data.get('name')); // 打印 'Will'
console.log(newNameData.get('name')); // 打印 'Susie'

В этом примере мы видим начальныйdataОбъект не изменился. Это означает, что при обновлении егоnameСтоимость свойстваSusieне сопровождается непредсказуемым поведением.

Эта простая функция очень эффективна, особенно при создании сложных приложений. ЭтоImmutableОсновной.

существуетImmutableОперации над объектами не изменяют исходный объект, а создают новый объект

ЗачемImmutableОчень полезно

Фейсбукнекоторые инженеры вДокументация Главнаяразобрался в использованииImmutableПреимущества, но немного запутанный. Вот некоторые из них, которые я собрал为什么你应该开始使用Immutable:

Ваша структура данных предсказуема

потому что ваша структура данныхImmutable, вы точно знаете, как работают ваши структуры данных. В сложных веб-приложениях это означает, что при нацеливанииUIПри внесении очень небольших изменений в структуру данных файла .

Надежность манипулирования данными

используяImmutableЧтобы манипулировать данными, вам сложно ошибиться в этих операциях.ImmutableСделал за вас много грязной работы:捕获异常,提供默认值а также开箱即用的创建嵌套数据结构.

Чистый и читаемый код

Сначала вы можете быть правыImmutableФункциональный дизайн 's сбивает с толку, но как только вы освоитесь, цепочка вызовов функций сделает ваш код менее читаемым и более читаемым. Это помогает команде поддерживать согласованность кода.

последующее исследование

несомненно,ImmutableКривая обучения не очень гладкая, но оно того стоит.Get startedУчеба — это просто закуска.

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

  • Структуры данных следует считать нативнымиjsструктура данных илиImmutableобъект
  • ImmutableОперации над объектами всегда возвращают результат операции
  • существуетImmutableОперации над объектами не изменяют исходный объект, а создают новый объект

удачи!

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

Категории