Как без document.querySelector и innerText обновить компонент?

В React нет необходимости использовать document.querySelector и innerText для обновления компонентов, так как React предлагает более декларативный подход к построению пользовательского интерфейса.

Для обновления компонентов в React используется состояние (state) и метод setState. Компоненты в React обладают своим внутренним состоянием, которое можно изменять, вызывая setState. Это приводит к перерисовке компонента и его дочерних компонентов с учетом обновленного состояния.

Для начала, вам необходимо определить состояние внутри компонента. Вы можете сделать это, используя хуки состояния (useState), если вы используете функциональные компоненты, или this.state, если вы используете классовые компоненты.

Пример использования хука состояния useState:

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1); // обновляем состояние, увеличивая счетчик на 1
  }

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={handleClick}>Увеличить</button>
    </div>
  );
}

В данном примере мы создаем компонент MyComponent, в котором определяем состояние count с начальным значением 0 при помощи хука useState. Затем мы создаем функцию handleClick, которая вызывается при нажатии на кнопку. В этой функции мы используем setCount для обновления состояния count, увеличивая его на 1. Возвращаемый JSX-код отображает текущее значение счетчика и кнопку для его увеличения.

Если вы используете классовые компоненты, то вы можете использовать this.state и this.setState:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 }); // обновляем состояние, увеличивая счетчик на 1
  }

  render() {
    return (
      <div>
        <p>Счетчик: {this.state.count}</p>
        <button onClick={this.handleClick}>Увеличить</button>
      </div>
    );
  }
}

В данном примере мы создаем классовый компонент MyComponent, в котором в конструкторе инициализируем состояние count в this.state. Метод handleClick вызывается при нажатии на кнопку и обновляет состояние с помощью this.setState. Результат рендера отображает текущее значение счетчика и кнопку для его увеличения.

Обратите внимание, что при вызове setState React самостоятельно обновляет компонент и его дочерние компоненты, если это необходимо. Вы не должны вручную манипулировать DOM-элементами при обновлении компонента в React.

Таким образом, в React вы можете безопасно обновлять компоненты, используя состояние и метод setState, без необходимости использования document.querySelector и innerText.