setState vs replaceState в React.js

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

  • this.setState
  • this.replaceState

приведенное описание не очень понятно (ИМО).

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}); а потом консоль.зарегистрировал их, и я нашел, что state теперь было и то и другое data и test.

тогда я попробовал this.setState({data: someArray}); следовал по this.setState({test: someArray}); а потом консоль.зарегистрировал их, и я нашел, что state снова оба data и test.

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

3 92
javascript reactjs frontend

3 ответа:

С 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) при тестировании.

133

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

// let's 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 () не сразу мутирует это.государство, но создает состояние ожидания перехода. Доступ к этому.состояние после вызова этого метод может возвращать текущее значение.

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

40

по словам docs,replaceState может сделать устаревшим:

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

11