setState против replaceState в React.js

92

Я новичок в React.js Library, и я перебирал некоторые уроки, и я наткнулся на:

  • this.setState
  • this.replaceState

Указанное описание не очень ясное (IMO).

setState is done to 'set' the state of a value, even if its already set 
in the 'getInitialState' function.

Аналогично,

The replaceState() method is for when you want to clear out the values 
already in state, and add new ones.

Я попробовал this.setState({data: someArray});, а затем this.replaceState({test: someArray});, а затем console.logged, и я обнаружил, что state теперь имеет как data, так и test.

Затем я попробовал this.setState({data: someArray});, а затем this.setState({test: someArray});, а затем console.logged, и я обнаружил, что state снова имел как data, так и test.

Итак, в чем же разница между двумя?

  • 1
    Ваш первый пример неточен. replaceState удалит предыдущее состояние. Вы, вероятно, проверяете это неправильно.
  • 1
    Я не искал изменений в обратном вызове. Может быть, поэтому ..
Теги:
frontend

3 ответа

129
Лучший ответ

С setState текущее и предыдущее состояния объединяются. С replaceState он выдает текущее состояние и заменяет его только тем, что вы предоставляете. Обычно setState используется, если вам действительно не нужно удалять ключи по какой-либо причине; но установка их в false/null обычно является более явной тактикой.

Пока это возможно, это может измениться; replaceState в настоящее время использует объект, прошедший как состояние, т.е. replaceState(x), и после установки this.state === x. Это немного легче, чем setState, поэтому его можно использовать в качестве оптимизации, если тысячи компонентов часто устанавливают свои состояния.
  Я подтвердил это с помощью этого тестового примера.

Если ваше текущее состояние {a: 1}, и вы вызываете this.setState({b: 2}); когда приложение будет применено, оно будет {a: 1, b: 2}. Если вы вызвали this.replaceState({b: 2}), ваше состояние было бы {b: 2}.

Боковое примечание: состояние не устанавливается мгновенно, поэтому при тестировании не выполняйте this.setState({b: 1}); console.log(this.state).

Поделиться
  • 1
    Мне все еще неясно. Можете ли вы привести пример, когда использование одного над другим изменяет результат, то есть это слияние, на которое вы ссылаетесь ...
  • 1
    Как существует предыдущее состояние и текущее состояние, например, как мы можем получить к ним доступ? Кроме того, я передал объект для замены состояния, но все же предыдущие данные о состоянии все еще присутствовали.
Показать ещё 2 комментария
37

Определение по примеру:

// let say that this.state is {foo: 42}

this.setState({bar: 117})

// this.state is now {foo: 42, bar: 117}

this.setState({foo: 43})

// this.state is now {foo: 43, bar: 117}

this.replaceState({baz: "hello"})

// this.state. is now {baz: "hello"}

Обратите внимание на это из docs:

setState() не сразу мутирует this.state, но создает ожидающий переход состояния. Доступ к this.state после вызова этого метод может потенциально вернуть существующее значение.

То же самое относится к replaceState()

Поделиться
  • 1
    это очень четкий ответ!
10

В соответствии с docs, replaceState может устареть:

Этот метод недоступен для компонентов класса ES6, которые расширяют React.Component. Он может быть полностью удален в будущей версии React.

Поделиться
  • 0
    Есть ли способ замены, который похож?
  • 1
    Для «похожего» метода вы можете использовать this.setState ({все: неопределенное, старое: неопределенное, ключи: неопределенное, новое: значение})
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню