SetState vs replaceState в React.js

Я новичок в 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

С 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).

Ответ 2

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

// 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()

Ответ 3

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

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