Жизнь без мечты подобна птице со сломанным крылом - она ​​не может летать. # Дэн Пена

- Темы для обсуждения в этой публикации

  • Понимание неизменяемости
  • Структура данных сохраняемости
  • Почему неизменяемость
  • Immer.js
  • Примеры погружения с помощью React Native (состояние, редуктор, хуки)

- Понимание неизменяемости

Объекты, которые после создания никогда не будут меняться или обновляться

const books = [{...},{...},{...},{...}]

Неизменяемость означает, что после создания массива книг вы не можете обновить какую-либо книгу или добавить новую книгу к исходным книгам.

Хорошо Круто, зачем мне использовать неизменяемость,

мы можем просто использовать (const, Object.freeze или Object.seal)

Прежде всего необходимо знать, что const ни один из Object.freeze не делает ваш объект неизменяемым, вы всегда можете внести изменения или обновить его после создания.

const arr = [.....] // const doesn't allow to reasign the object
arr = {} // ❌ not allowed => can't reassign arr
// But
arr.push()  // ✅ can update
arr[0] = {} // ✅ can update
// ----------------- Object.freeze -----------------
// yes you can't update the array items, 
// but just try to updated deeply items, it will update
const arr = Object.freeze([
      { id: 1, name: 'ss' },
      { id: 2, name: 'ss' },
      { id: 3, name: 'ss' }
])
arr[1] = null // ❌ array item not updated
arr[1].name = 'updated' // updated ✅

Почему неизменяемость?

или спросите вместо этого почему не неизменяемость ??

  • Мутации непредсказуемы, поэтому это небезопасно
  • Мутации скрывают изменения и допускают побочные эффекты
  • труднее рассуждать и может вызвать неприятные ошибки
  • Мутации могут снизить производительность и увеличить объем памяти

- Структура данных сохраняемости

постоянная структура данных - это структура данных, которая всегда сохраняет предыдущую версию самой себя при ее изменении. Такие структуры данных фактически неизменяемы, поскольку их операции (явно) не обновляют структуру на месте, а вместо этого всегда создают новую обновленную структуру.

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

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

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

К счастью, неизменяемость использует совместное использование структуры, которое не копирует оригинал, просто обратитесь к нему.

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

Трие

trie - это разновидность дерева поиска - упорядоченного дерева структуры данных, используемого для хранения динамического набора или ассоциативного массива, где ключами обычно являются строки.

Жизнь действительно проста, но мы настаиваем на ее усложнении. # Конфуций

- Immer.js

immer - это крошечный пакет, который позволяет более удобно работать с неизменяемым состоянием. Он основан на механизме копирование при записи

Основная идея состоит в том, что вы примените все свои изменения к временному draftState, который является прокси для currentState. Как только все ваши мутации будут завершены, Immer создаст nextState на основе мутаций до состояния черновика. Это означает, что вы можете взаимодействовать со своими данными, просто изменяя их, сохраняя при этом все преимущества неизменяемых данных.

Погрузитесь в React Native

Пример setState

import produce from "immer";
this.setState({ user: {} })
------------------------------------
this.setState(produce(draft => drafte.user = {}))

Пример редуктора

import produce from "immer";
import {
LOGIN_USER,
} from 'REDUX_TYPES';
const INITIAL_STATE = { user: null };
export default (state = INITIAL_STATE, action) => {
      return produce(state, draft => {
      switch (action.type) {
            case LOGIN_USER:
            draft = { loading: true };
            return draft;
      }
    });
};

Используйте погружение с крючками

Пример хуков

import { useImmer } from "use-immer";
function UseImmerEx(props) {
      const [active, setActive] = useImmer(false);
      useEffect(() => {
            /**  */
            setActive(draft => draft = true)
     
            return (() => {
                   // unmount
            })
      },[]);
      return (
            <View />
      )
}

Спасибо за чтение :)

Отзывы приветствуются, с уважением