@antonstolar

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

Вот в 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?
  • Вопрос задан
  • 461 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Достаточно грубый пример, но суть должен передать:
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);

Демо
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы