Я новичок в библиотеке React.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});
а затем console.logged их, и я обнаружил, что state
теперь есть и data
и test
.
Затем я попробовал this.setState({data: someArray});
следовать за ними, this.setState({test: someArray});
а затем console.logged их, и я обнаружил, что state
снова были оба data
и test
.
Итак, в чем именно разница между ними?
javascript
frontend
reactjs
Мюсуф
источник
источник
Ответы:
При
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)
при тестировании.источник
.setState({...}, callback)
Определение на примере:
Однако обратите внимание на это в документации :
То же самое касается
replaceState()
источник
Согласно документации ,
replaceState
может устареть:источник
Поскольку
replaceState
теперь не рекомендуется, вот очень простой обходной путь. Хотя, вероятно, довольно редко вы будете / должны прибегать к этому.Чтобы удалить состояние:
Или, в качестве альтернативы, если вы не хотите, чтобы несколько вызовов
setState
По сути, все предыдущие ключи в состоянии теперь возвращаются
undefined
, что очень легко можно отфильтровать с помощьюif
оператора:В JSX:
Наконец, чтобы «заменить» состояние, просто объедините новый объект состояния с копией старого состояния, которое было
undefined
, и установите его как состояние:источник