Как React прослушивает изменения состояния

#javascript #reactjs

Вопрос:

В настоящее время я начал учиться React.js и мне интересно, как React прислушивается к изменениям состояния?

Я имею в виду, я знаю, что в Javascript нет прослушивателей событий для отслеживания изменения переменной, и я почти уверен, что мы не можем прослушивать изменение переменной (без использования интервала для проверки изменения) в Javascript изначально…

Но в React, если вы измените свойство состояния, оно мгновенно обнаружит изменение ?!

Как это реализовано в React?

1. Прочтите что-нибудь вроде w3schools.com/react/react_state.asp и дайте нам знать, если вы все еще озадачены.. (А также, если вы используете redux, сообщите нам об этом)

2. ‘>- нет прослушивателей событий.. для отслеживания переменных» — не совсем верно, есть такая вещь, как Proxy

3. Такая функция, как setState только обновляет состояние и снова вызывает компонент с новым значением состояния. У Дэна Абрамова есть хорошее объяснение этому

Ответ №1:

React вообще не пассивно прослушивает изменения состояния. Единственный способ узнать, что состояние изменилось, — это то, что вы явно указываете 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);
  }, []);

  // ...
}

1. Но я подумал, что мы this.state.name = 'some name'; тоже можем использовать …!!!

2. React не будет знать, что вы это сделали, и, следовательно, не будет знать о повторном запуске. Возможно, что какой-то другой фрагмент кода может вызвать setState и вызвать повторный запрос, и когда это произойдет, react будет использовать 'some name' . Но если это произойдет, вам просто повезло. Не изменяйте состояние в react; вызовите setState .

3. Привет @Pixier надеюсь, вы получаете удовольствие от React в управлении состоянием, просто имейте в виду, что ПЕРЕМЕННЫЕ СОСТОЯНИЯ ЯВЛЯЮТСЯ НЕИЗМЕНЯЕМЫМИ, поэтому вы не можете изменять их напрямую, выполняя ` this.state.name = ‘Some state» Intead использует useState перехватчики реакции для функционального компонента или this.setState({state: value}) какпоказано @NicholasTower