Автор оригинала: FreeCodeCamp Community Member.
Справедливость MBA
Обновление: я дал последующую поговорить по этой теме в RaG Rally. Хотя этот пост больше о «функциональном стиле SetState», разговор больше о том, чтобы понять SetState глубоко
React имеет популяризированное функциональное программирование в JavaScript. Это привело к гигантскими каркасам, принимающим паттерн интерфейса на основе компонентов, который реагирует на использование. И теперь функциональная лихорадка проливается в экосистему веб-разработки в целом.
Но команда реагирования далеко от отношения. Они продолжают копать глубже, обнаружив еще более функциональные драгоценные камни, скрытые в легендарной библиотеке.
Итак, сегодня я открою вам новое функциональное золото похоронено в React, лучше всего хранить Реагировать секрет – Функциональная SetState!
Хорошо, я только что решил это имя … и это не полностью Новый или секрет. Нет, не совсем. Смотрите, это узор, встроенный в реакцию, который известен только несколькими разработчиками, которые действительно выкопали глубоко. И никогда не было имени. Но теперь это делает – Функциональный setstate!
Идущий по Дэн Абрамов слова в описании этого шаблона, Функциональный SetState это шаблон, где вы
Хм?
Хорошо… То, что вы уже знаете
React – это библиотека пользовательской интерфейсы на основе компонентов. Компонент в основном является функцией, которая принимает некоторые свойства и возвращает элемент пользовательского интерфейса.
function User(props) { return ( A pretty user );}Компонент может потребоваться и управлять своим государством. В этом случае вы обычно пишете компонент как класс. Тогда у вас есть его государство в прямом эфире в классе Конструктор Функция:
class User { constructor () { this.state = { score : 0 }; } render () { return ( This user scored {this.state.score} ); }}Для управления состоянием React предоставляет специальный метод под названием setState () Отказ Вы используете это так:
class User { ... increaseScore () { this.setState({score : this.state.score + 1}); }...}
Обратите внимание, как setState () работает. Вы проходите это объект содержащие часть (ые) состояния, которое вы хотите обновить. Другими словами, объект, который вы передаете, будут иметь ключевые ключи, соответствующие ключам в состоянии компонента, то setState () Обновления или наборы Состояние, объединяя объект в государство. Таким образом, «Установленное состояние».
Что вы, вероятно, не знали
Помните, как мы сказали setState () работает? Ну что если я сказал вам, что вместо того, чтобы пройти объект, вы можете пройти Функция ?
да. setState () также принимает функцию. Функция принимает предыдущий Государство и Текущий Оприфры компонента, который он использует для расчета и возврата следующего состояния. Смотрите это ниже:
this.setState(function (state, props) { return { score: state.score - 1 }});Обратите внимание, что setState () Это функция, и мы передаем другую функцию к нему (функциональное программирование … Функциональный SetState ). На первый взгляд, это может показаться уродливым, слишком много шагов только для устава. Почему вы когда-нибудь хотите сделать это?
Зачем пройти функцию для настройки?
Вещь, Государственные обновления могут быть асинхронными Отказ
Подумайте о Что происходит, когда SetState () называется Отказ Реагировать сначала объединить объект, который вы передали setState () в текущее состояние. Тогда он начнет это Примирение вещь. Он создаст новый дерево элемента React Element (представление объекта вашего пользовательского интерфейса вашего UI), развлекайте новое дерево на старое дерево, выясните, что изменилось на основе объекта, который вы передали setState () Затем, наконец, обновите DOM.
Whaw! Так много работы! На самом деле это даже чрезмерно упрощенное резюме. Но доверять реагированию!
Из-за количества вовлеченных, призывающих setState () не может немедленно Обновите свое состояние.
Что реагирует под этим?
Во-первых, « несколько setState () Звонки” может означать призыв setState () Внутри одной функции более одного раза, как это:
...
state = {score : 0};// multiple setState() callsincreaseScoreBy3 () { this.setState({score : this.state.score + 1}); this.setState({score : this.state.score + 1}); this.setState({score : this.state.score + 1});}...
Теперь, когда реагируют, встречаются « несколько setState () Звонки”, Вместо того, чтобы сделать это «настроен» Три целых времени Реакция реагирует, что огромное количество работы, которую я описал выше, и умно сказать себе: «Нет! Я не собираюсь залезть эту гору три раза три раза, носить и обновлять немного ломтика государства в каждой поездке. Нет, я предпочел бы получить контейнер, упаковать все эти ломтики вместе и сделать это обновление только один раз. ” И что мои друзья, это Дозировка Действительно
Помните, что вы проходите к setState () это простой объект. Теперь предположим, что в любое время возникает в реакцию « несколько SetState () Звонки”, Это делает пакетную вещь, извлекая все объекты, переданные каждому setState () Звоните, объединяют их вместе, чтобы сформировать один объект, а затем использует этот единственный объект для DO setState () Отказ
В JavaScript слияние объектов может выглядеть что-то подобное:
const singleObject = Object.assign( {}, objectFromSetState1, objectFromSetState2, objectFromSetState3);Этот шаблон известен как Композиция объекта.
В JavaScript, путь «объединение» или составляя Работы объектов: если три объекта имеют одинаковые ключи, значение ключа Последний объект передан на Объект.assign () выигрывает. Например:
const me = {name : "Justice"}, you = {name : "Your name"}, we = Object.assign({}, me, you);we.name === "Your name"; //true
console.log(we); // {name : "Your name"}Потому что Вы последний объект, объединенный в Мы ценность Имя В Вы Объект – «Ваше имя» – переопределяет значение Имя В я объект. Так что «ваше имя» делает его в Мы Объект … Вы победить!:)
Таким образом, если вы звоните setState () С объектом несколько раз – передача объекта каждый раз – отреагируйте бы ?| слияние Отказ Или другими словами, это будет составить Новый объект из нескольких объектов, которые мы пропустили его. И если какой-либо из объектов содержит один и тот же ключ, значение ключа Последнее Объект с же клавишей хранится. Верно?
Это означает, что, учитывая наши inereasescoreby3 Функция выше, конечный результат функции будет просто 1 вместо 3, потому что реагировать не немедленно Обновите состояние в заказ, который мы позвонили setState () Отказ Но во-первых, отреагируйте все объекты вместе, которые результаты к этому: {Оценка: this.state.score + 1} Затем только «установил-состояние» один раз – с недавно составленным объектом. Что-то вроде этого: User.settate ({Оценка: this.state.score + 1} .
Быть супер понятным, прохождение объекта к setState () не проблема здесь. Настоящая проблема пропускает объект к setState () Когда вы хотите рассчитать следующее состояние из предыдущего состояния. Так что перестань делать это. Это небезопасно!
Вот ручка Sophia Shoemaker, которую демонстрирует эту проблему. Играйте с ним и обратите внимание на плохие, так и на хорошие решения в этой руке:
Функциональный SetState для спасения
Если вы не провели время, играя с ручкой выше, я настоятельно рекомендую вам сделать, так как оно поможет вам понять основную концепцию этого поста.
Пока вы играли с ручкой выше, вы, несомненно, видели, что Функциональный SetState Исправлена наша проблема. Но как, именно?
Давайте проконсультируемся на Опра реагирования – Дан.
Обратите внимание на ответ, который он дал. Когда вы делаете функционал SetState …
Итак, при реактивных встречах « несколько Функциональный setState () Звонки”, Вместо объединения объектов вместе (конечно, нет объектов слияния) Реагировать очереди Функции « в порядке их называли».
После этого отреагируйте обновление состояния, вызывая каждую функции в «очереди», передавая их предыдущий Государство – то есть государство, как это было до Первый функционал setState () вызов (Если это первый функциональный setState () в настоящее время выполняется) или состояние с Последнее Обновление от предыдущий Функциональный setState () Позвоните в очередь.
Опять же, я думаю, что увидит, что какой-то код будет отличным. На этот раз мы собираемся подделать все. Знайте, что это не реальная вещь, но вместо этого просто здесь, чтобы дать вам Идея из того, что делает реагирование.
Кроме того, чтобы сделать его менее многолетним, мы будем использовать ES6. Вы всегда можете написать версию ES5 позже, если хотите.
Во-первых, давайте создадим класс компонента. Тогда, внутри этого мы создадим Подделка setState () метод. Также наш компонент будет иметь insterasescoreby3 () Метод , Что сделает несколько функциональных SetState. Наконец, мы создали бы класс, как и реагирование.
class User{ state = {score : 0}; //let's fake setState setState(state, callback) { this.state = Object.assign({}, this.state, state); if (callback) callback(); } // multiple functional setState call increaseScoreBy3 () { this.setState( (state) => ({score : state.score + 1}) ), this.setState( (state) => ({score : state.score + 1}) ), this.setState( (state) => ({score : state.score + 1}) ) }}const Justice = new User();
Обратите внимание, что SetState также принимает дополнительный второй параметр – функция обратного вызова. Если он присутствует, реагирует, вызывает его после обновления состояния.
Теперь, когда пользователь триггеры insterasescoreby3 () , Реагируйте по очереди вверх по нескольким функциональным уставам. Мы не будем подделать эту логику здесь, так как наше внимание на Что на самом деле делает функциональный SetState Safe Отказ Но вы можете подумать о результате этого процесса «очередя», чтобы стать массивом функций, таких как это:
const updateQueue = [ (state) => ({score : state.score + 1}), (state) => ({score : state.score + 1}), (state) => ({score : state.score + 1})];Наконец, давайте подделываем процесс обновления:
// recursively update state in the orderfunction updateState(component, updateQueue) { if (updateQueue.length === 1) { return component.setState(updateQueue[0](component.state)); }return component.setState( updateQueue[0](component.state), () => updateState( component, updateQueue.slice(1)) );}
updateState(Justice, updateQueue);
Правда, это не так сексуально код. Я доверяю, вы можете сделать лучше. Но основной фокус здесь состоит в том, что каждый раз реагируют выполняет функции от вашего Функциональный SetState, Реагируйте обновления вашего состояния, передавая его Свежий Копия обновленного состояния. Это делает возможным для Функциональный SetState к Установить состояние на основе предыдущего состояния Отказ
Здесь я сделал корзину с полным кодом. Тинкер вокруг него (возможно, заставить его выглядеть сексуальнее), просто чтобы получить больше смысла.
Функциональные возможности Игра с кодом в этом bin будет весело. Помнить! Мы просто притворяемся реагирующим, чтобы получить идею … jsbin.com
Играйте с этим, чтобы полностью понять его. Когда вы вернетесь, мы посмотрим, что делает функционал SetState по-настоящему золотой.
Лучший секрет реагирования
До сих пор мы глубоко исследули, почему безопасно делать несколько функциональных уставок в реакции. Но мы на самом деле не выполнили полный Определение функционального setState: «Объявление государства меняется отдельно от классов компонентов».
На протяжении многих лет логика настройки-состояния – то есть функции или объекты, которые мы передаем на setState () – всегда жил внутри Компонентные классы. Это более необходимый, чем декларативный.
Ну сегодня я представляю тебе вновь неотрасленные сокровища – Лучше всего реагировать в секрете:
Благодаря Дэну Абрамову!
Это сила функциональной уставы. Объявите свое государственное обновление логики снаружи ваш класс компонента. Тогда назовите это внутри ваш класс компонента.
// outside your component classfunction increaseScore (state, props) { return {score : state.score + 1}}class User{ ...// inside your component class handleIncreaseScore () { this.setState( increaseScore) }...}
Это декларативный! Ваш компонентный класс больше не заботится Как Государственные обновления. Это просто объявляет Тип обновления его желания.
Глубоко ценить это, подумайте о тех сложных компонентах, которые обычно имеют много ломтиков состояний, обновляя каждый кусочек на разных действиях. И иногда каждая функция обновления потребует многих строк кода. Все эта логика будет жить внутри Ваш компонент. Но не больше!
Кроме того, если вы похожи на меня, мне нравится держать каждый модуль как можно короче, но теперь вы чувствуете, что ваш модуль становится слишком долго. Теперь у вас есть возможность извлекать всю логику изменений в другой модуль, затем импортировать и использовать его в своем компоненте.
import {increaseScore} from "../stateChanges";class User{ ... // inside your component class handleIncreaseScore () { this.setState( increaseScore) }...}
Теперь вы можете даже повторно использовать функцию inlowerascore в разные составная часть. Просто импортируйте это.
Что еще вы можете сделать с функционалом SetState?
Сделать тестирование легко!
Вы также можете пройти Дополнительно Аргументы для расчета следующего состояния (это взорвало мой разум … #funfunfunction).
Ожидать еще больше в …
Будущее реагирования
В течение многих лет команда Ract React была экспериментирована с тем, как наилучшим образом реализовать Учетные функции Отказ
Функциональный SetState, кажется, просто правильный ответ на это (возможно).
Эй, Дэн! Любые последние слова?
Если вы сделали это так далеко, вы, вероятно, так же взволнованы, как я. Начните экспериментировать с этим Функциональный SetState Cегодня!
Если вы чувствуете, что сделали какую-то хорошую работу, или что другие заслуживают шанса увидеть это, пожалуйста, щелкните по зеленым сердцем ниже, чтобы помочь распространить лучшее понимание реагирования в нашем сообществе.
Если у вас есть вопрос, который не ответил, либо вы не согласны с некоторыми из точек, здесь не стесняйтесь падать в комментариях здесь или через Twitter Отказ
Счастливое кодирование!