Реактовское состояние в чистом JS?

Question

[antonstolar]

Вот в React есть такое понятие как состояние (state). Оно нужно что б можно было изменить значение какого-то элемента.
Используем setState и меняем состояние.
И вот мне интересно а что есть в чистом JS состоянием? Или чем его заменяют? Где храниться исходное состояние и чем потом мы его меняем также как в реакте меняем cостояние setState-ом?

Вот например есть код вкладок на React. Здесь мы устанавливаем начальное значение в обьект state - actice:null и потом меняем его с помощью setState когда переключаем на другую вкладку:

class TabContent extends React.Component {
  render() {
    const { title, content } = this.props;

    return (
      <div className="tabcontent">
        <h3>{title}</h3>
        <p>{content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: null,
  }

  openTab = e => this.setState({
    active: +e.target.dataset.index,
  });

  render() {
    const { items } = this.props;
    const { active } = this.state;

    return (
      <div>
        <div className="tab">
          {items.map((n, i) => (
            <button
              className={`tablinks ${i === active ? 'active' : ''}`}
              onClick={this.openTab}
              data-index={i}
            >{n.title}</button>
          ))}
        </div>
        {items[active] && <TabContent {...items[active]} />}
      </div>
    );
  }
}

А есть тот же код но на чистом Javascript:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Что здесь состояние и где его значение? Что здесь setState?

Answer 1

[Антон Спирин]

Достаточно грубый пример, но суть должен передать:

const updater = (component, prevState) => {
  if (Object.keys(prevState).some(
    key => prevState[key] !== component.state[key],
  )) {
    component.render();
    
    if (component.componentDidUpdate) {
      component.componentDidUpdate(prevState);
    }
  }
}

const domRender = (Component) => {
  const component = new Component();
  
  component.render();
  
  if (component.componentDidMount) {
    component.componentDidMount();
  }
}

class Component {
  constructor() {
    this.updater = updater;
  }
  
  setState(newState) {
    const prevState = this.state;
    
    if (typeof newState === 'function') {
      this.state = newState(prevState);
    } else {
      this.state  = { ...prevState, ...newState };
    }
    
    this.updater(this, prevState);
  }
}

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: 'Initial value',
    }
  }
  
  componentDidMount() {
    setTimeout(() => {
      this.setState({ value: 'New value' });
    }, 2000);
  }

  componentDidUpdate(prevState) {
    console.log('Prev state: ', prevState);
    console.log('New state: ', this.state);
  }

  render() {
    const { value } = this.state;
    
    document.querySelector('.example').innerHTML = value;
  }
}


domRender(Example);

Демо

Comments

[antonstolar]

Из того что вы привели в пример вопрос мой вопрос к сожалению не закрыт, я не разобрался...
Я хотел как раз таки чтобы на предложенном моем коде вы объяснили где состояние и чем мы его меняем. И вообще оно есть в моем примере? Код же выполняет одно и то же действие(смена вкладок). По идее и в чистом JS должно быть свое состояние и его можно изменить.

[Антон Спирин]

antonstolar, вам стоило начать изучение не с React, а с чистого JavaScript.
Термин состояние достаточно широкий.

Что является состоянием в нативном JavaScript?

var state = 'initial value';
state = 'new value';

Состояние ли переменная state? Вполне себе состояние.
Что в этом случае является аналогом setState? Оператор присваивания.

<div class="tab tab--active"></div>

А селектор .tab--active? Вполне себе.
В этом случае аналогом setState будут методы геттера classList и не только они.

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

[antonstolar]

Антон Спирин,

но в моем коде нет методов геттера classList, то есть в моем примере нет аналога setState?
Можете еще хоть один метод (или что-то, что можно назвать аналогом setState) классического JS назвать который можно назвать аналогом метода setState кроме методов геттера classList?

На счет состояния, да, действительно переменную можно назвать состоянием, ведь она может меняться.
вот например такие строки:

for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");

С помощью цикла мы перебираем массив и меняем элементы. А массив также можно назвать состоянием? и сам перебор сменой состояния?

"А селектор .tab--active? Вполне себе."
вы имеете в виду что селектор это состояние?

[Антон Спирин]

antonstolar,

но в моем коде нет методов геттера classList, то есть в моем примере нет аналога setState?

В комментарии я писал "методы геттера classList и не только они. "

можно назвать аналогом метода setState

В контексте прошлого комментария под аналогами setState я подразумевал способы задать состояние, изменить значения, которые мы за него приняли. Все это естественно не прямые аналоги setState.

С помощью циклов мы перебираем массив и меняем элементы. А массив также можно назвать состоянием? и сам перебор сменой состояния?

Массив вполне. Перебор нет. Тут вы изменяете состояние элементов массива с помощью оператора присваивания и метода replace.

Я вам настоятельно рекомендую отложить пока React и изучить основы JavaScript.