Как React прослушивает изменения состояния
В настоящее время я начал изучать React.js, и мне интересно, как React прослушивает изменения состояния?
Я имею в виду, что знаю, что в Javascript нет прослушивателей событий для отслеживания изменения переменной, и я почти уверен, что мы не можем прослушивать изменение переменной (без использования интервала для проверки изменения) в Javascript изначально...
Но в React, если вы измените свойство состояния, оно мгновенно обнаружит изменение?!
Как это реализовано в React?
>- нет обработчиков событий.. для отслеживания переменных' - не совсем так, есть такое понятие как Proxy
Такая функция, как setState, только обновляет состояние и снова вызывает компонент с новым значением состояния. У Дэна Абрамова есть хорошее объяснение этому
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
React вообще не прослушивает пассивно изменения состояния. Единственный способ узнать, что состояние изменилось, — это потому, что вы явно указываете реагировать на изменение состояния. В компонентах класса это делается с помощью this.setState:
class Example extends React.Component {
state = {
name: 'valentina';
}
componentDidMount() {
setTimeout(() => {
this.setState({ name: 'jebediah' });
}, 1000);
}
// ...
}
В функциональном компоненте это функция установки состояния, возвращаемая useState:
const Example = (props) => {
const [name, setName] = useState('valentina');
useEffect(() => {
setTimeout(() => {
setName('jebediah');
}, 1000);
}, []);
// ...
}
Но я подумал, что мы тоже можем использовать this.state.name = 'some name';...!!!
React не будет знать, что вы это сделали, и, следовательно, не будет знать, что нужно перерендерить. Возможно, какой-то другой фрагмент кода может вызвать setState и вызвать повторную визуализацию, и когда это произойдет, реакция будет использовать 'some name'. Но если это произойдет, вам просто повезло. Не изменяйте состояние в реакции; вызовите setState.
Привет, @Pixier, надеюсь, вы получаете удовольствие от React. В управлении состоянием просто имейте в виду, что ПЕРЕМЕННЫЕ СОСТОЯНИЯ ЯВЛЯЮТСЯ НЕИЗМЕННЫМИ, поэтому вы не можете изменить их напрямую, выполнив `this.state.name = 'Some state'` Вместо этого используйте useState React Hooks для функционального компонента. или this.setState({state: value}), как показано @NicholasTower
Прочитайте что-нибудь вроде w3schools.com/react/react_state.asp и дайте нам знать, если вы все еще озадачены.. (А также, если вы используете Redux, дайте нам знать)