Душевная пытка из «Троицы Бога», автор буклета «React Hooks and Immutable»

React.js

дела идут

Произошло следующее: мы видим, что в последнее время может часто появляться реклама на 👇 Nuggets.

Затем я прочитал обзор и почувствовал, что это было довольно хорошо, поэтому я купил его (все равно не дорого). После присоединения к группе я чувствовал, что автор был очень внимательным, но недавно проект использовал Vue в качестве терминала ПК, Поэтому я не очень прочитал эту буклет, думая об этом. После этого периода работы я буду смотреть на это во время китайского Нового года.
Но в этот момент я вдруг заметил, что Учитель Саньюань рекомендовалimmerМногие спросятimmerЧто это такое?

По наитию решил, что пора дать всем хорошее научное знание.Такую полезную вещь нужно всем использовать как можно скорее, иначе что делать автору, если он разочаровался и не продолжает ее поддерживать ? Поэтому я написал статью:Оптимизация вашего проекта React с помощью immer вместо immutable в 2020 году.
Затем я отправил его группе, и @Teacher Sanyuan:

Как раз, когда я втайне благодушествовал, он вдруг дал мне душевную пытку:

Он задал мне вопрос, на который я не ответил: каковы преимущества использования Immer? (Потому что в моей статье написано useImmer вместо useState)👇

Ссылки при написании статейuseImmerОфициальный документ, этот документ написан следующим образом:

переводить:useImmer(initialState) очень похож на useState. Этот метод возвращает массив. Первое значение в массиве — текущее состояние, а второе значение — функция обновления. Функция обновления принимает функцию в качестве параметра. Параметры этого функция может быть очень свободной для изменения, когда функция выполняется, неизменяемые данные будут сгенерированы как новое состояние

В то время я невнимательно прочитал это предложение, и все мое внимание было приковано к маленькому делу в его документе.Я не думал об этом глубоко.В результате меня разбудили слова Учителя Саньюаня. : useImmer сравнивается с useState.В чем его преимущество?

Я работал сверхурочно первые два дня и работал над проектами, даже в первый день 2020-.-!У меня не было времени подумать об этом.Я вдруг вспомнил об этом после того, как сегодня был занят, поэтому я взял присмотрелся и наконец понял.Чем это лучше, чем useState!

Более удобное хранение и модификация данных о состоянии

До того, как хуки стали общедоступными, мы определили состояние следующим образом:

state = {
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
}

В этом случае, если вы используетеустановить состояние ({…})В таком виде изменять данные будет хлопотнее, поэтому рекомендуется метод функциональной записи:

this.setState(state => {
    state.people[2].englishName = 'Robin Lee'
    return {...state}
});

На самом деле так писать нехорошо, потому что изменение значения в массиве people параметра state эквивалентно изменению данных в этой ссылке, что не соответствует идее неизменяемости React.

Функциональный метод setState требует, чтобы каждый раз возвращалась новая ссылка, но, поскольку данные определения компонента хуков больше не могут быть определены, если вы все еще пишете, как раньше:

const [state, setState] = useState({
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
});

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

const [jack, setJack] = useState({
    name: '马云',
    englishName: 'Jack Ma'
});
const [pony, setPony] = useState({
    name: '马化腾',
    englishName: 'Pony Ma''
});
const [robin, setRobin] = useState({
    name: '李彦宏',
    englishName: 'Robin Li'
});

Таким образом, гораздо удобнее изменять данные, и степень детализации более тонкая, но громоздкая для написания, не интуитивно понятная, и объем кода больше, особенно когда объем ваших данных относительно велик, или уровень вложенности относительно глубокий.Просто беда. Так как же сделать его таким же удобным и быстрым, как setState раньше, и при этом использовать функциональные компоненты? Умные друзья должны были догадаться и догадаться:useImmer!
Давайте посмотрим, как useImmer записывает приведенную выше логику:

// 定义
const [state, setState] = useImmer({
    people: [
      {
        name: '马云',
        englishName: 'Jack Ma'
      },
      {
        name: '马化腾',
        englishName: 'Pony Ma'
      },
      {
        name: '李彦宏',
        englishName: 'Robin Li'
      }
    ]
})

// 修改
setState(state => {state.people[2].name = 'Robin Lee'})

Каким бы глубоким ни был уровень вложенности, какими бы сложными ни были данные, useImmer позволяет напрямую модифицировать состояние, что вроде бы несовместимо с идеей неизменяемости, а на самом деле просто прописано в синтаксисе. На самом деле, он не изменяет значение состояния напрямую, но возвращает вам совершенно новую ссылку и более эффективен, чем immutable.js.
Ведь Proxy используется внутри для сравнения (Это немного похоже на перемещение набора Vue.)

Конечно, следует отметить еще один момент:

Собственный setState может быть напрямую использован в качестве возвращаемого значения, а измененное значение пиратского useState, сгенерированное этим useImmer, не может быть напрямую возвращено в качестве возвращаемого значения, поэтому фигурные скобки требуются вне тела функции.

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

Для более конкретного использования, пожалуйста, обратитесь к:Оптимизация вашего проекта React с помощью immer вместо immutable в 2020 году

Руководство @神三元

Я почти закончил писать здесь. После того, как я закончу писать на этот раз, я продолжу публиковать @三元师 в группе, чтобы узнать, считает ли он все еще функцию ловушки useImmer бесполезной на этот раз (Если будет много лайков, я продолжу обновлять статью и присылать скриншоты диалога учителя Саньюаня.) Кстати, дайте господину Саньюану бесплатную рекламу:React Hooks и неизменяемый поток данных в действии

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

следовать за

Г-н Саньюань объяснил сценарий использования useImmer здесь.Если ваш бизнес-сценарий похож на то, что г-н Саньюань сказал об использовании хуков вместо редукса, вы можете попробовать этот волшебный хук в проекте!

Замечательные статьи в прошлом

Категории