Зачем реагировать на функцию рендеринга вызова, если я не изменил ссылку на состояние?

70
6

Итак, почему реагирует на вызовы в этом сценарии:

class MyComponent extends React.Component {
constructor(props) {
this.state = {
user: { name: 'john' },
};
}

render() {
return (
<div>
Name: {this.state.user.name}
<button onClick={() => {

const user = this.state.user;
user.name = 'Michael';

// this works, also this.setState({}) with empty json works too
this.setState({ user });
}}> Change name </button>
</div>);
}

Я ожидал, что React не обнаружит изменений и для того, чтобы приведенный выше код работал, чтобы сделать копию объекта пользователя, чтобы React обнаружил изменения следующим образом:

const user = {...this.state.user}; // a new copy of object, so new refference

Есть идеи?

спросил(а) 2018-09-11T12:24:00+03:00 2 года, 1 месяц назад
1
Решение
81

Настройка состояния с пустым объектом работает, потому что реакция не делает ничего с самой мутацией состояния. Скорее, он просто использует объект state и создает обновленную виртуальную DOM при вызове метода render, который также отражает мутации состояния.

Однако проблема при выполнении мутации состояния заключается в том, что методы lifecyle теперь не смогут четко различать между prevState и this.state и много сравнений не сработает, поскольку значения prevState и this.state будут ссылаться на одну и ту же ссылку.

ответил(а) 2018-09-11T12:29:00+03:00 2 года, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема