React: государственные темы/примечания

И снова здравствуйте! Честно говоря, здорово вернуться. Пара дней состояла из того, что я переехал и снова настроился на работу.
Сегодня Freecodecamp мы узнаем о штате. В основном состоит из любых данных, о которых необходимо знать наше приложение, которые могут измениться со временем. Мы хотим, чтобы наши приложения отвечали на изменения состояния и представили обновленный пользовательский интерфейс.
Мы можем создать состояние в компоненте React, объявив свойство штата в классе компонентов в его конструкторе.
Не забывайте, что это должно быть установлено на объект JavaScript.
Бывший:

this.state = {

}

У нас есть доступ к государственному объекту на протяжении всей жизни нашего компонента. Мы можем либо обновить его, отображать в нашем пользовательском интерфейсе и передать его в качестве реквизита детским компонентам. Мы должны создать компонент класса, расширяя React. Компонент для создания такого состояния.
Бывший:

class StateComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Randy" 
    }
  }
  render() {
    return (
      
        {this.state.name}
      
    );
  }
};

Здесь мы инициализировали компонент и назначили мое имя своему свойству имени.

Состояние рендеринга в пользовательском интерфейсе

После определения состояния мы можем отобразить его в пользовательском интерфейсе, который отображается. Если компонент является состоятельным, то он всегда будет иметь доступ к данным в состоянии в своем методе render ().
Вы можете получить доступ к данным с помощью this.state Анкет
Однако, если вы хотите получить доступ к значению состояния в пределах возврата метода рендеринга, важно приложить значение в кудрявые скобки.
Код:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Randy Rivera"
    }
  }
  render() {
    return (
      
         {this.state.name}
      
    );
  }
};

Здесь MyComponent уже является состоятельным, мы определили метку H1 в методе рендеринга компонента, который делает значение имени из состояния компонента. Важно знать, что H1 делает ценность из состояния и ничего более. В JSX любой код, который мы пишем с вьющимися скобками, будут рассматриваться как JavaScript.
Его состояние локально для этого компонента, если вы не передаете данные о состоянии дочерним компонентам в качестве реквизита.
Еще один способ получить доступ к состоянию в компоненте — это метод render () перед оператором возврата, вы можете написать JavaScript напрямую. Например, вы можете объявить функции, доступ к данным из состояния или реквизита.
Бывший:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Randy Rivera'
    }
  }
  render() {
    const name = this.state.name;
    return (
      
        {name}
      
    );
  }
};

Помните, что вам нужно использовать синтаксис JSX (Curly Braces для JavaScript) в операторе возврата.

Примечания:

Состояние — действительно мощная особенность в React. Это позволяет вам отслеживать важные данные в вашем приложении и отображать пользовательский интерфейс в ответ на изменения в этих данных. Если ваши данные изменятся, ваш пользовательский интерфейс изменится.

Установить состояние с этим. SetState

Есть способ изменить состояние компонента. React предоставляет метод обновления состояния компонентов, называемого SetState Анкет Вы называете SetState Метод в вашем классе компонентов, как это: this.setState () , проходя в объекте с парами ключей.
Бывший:

this.setState({
  name: "Randy WaitForIt Rivera"
})

Бывший:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      name: "Randy WaitForIt Rivera!"
    })

  }
  render() {
    return (
      
        
        {this.state.name}
      
    );
  }
};

Когда вы нажимаете кнопку, посмотрите обновление рендерированного состояния.

Связывать «это» с методом класса

Вы также можете определить методы для вашего класса компонентов. Как правило, он должен использовать это ключевое слово Таким образом, он может получить доступ к свойствам в классе (например, состояние и реквизит) внутри охвата метода.
Один из способов сделать это — привязать это в конструкторе так это становится связанным с методами класса, когда компонент инициализируется. В вышеупомянутом разделе он использовал. Handleclick.bind (это) для своего метода ручной работы в конструкторе.
Бывший:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "PS5 Players Unite!"
    };
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      text: "PS5 And PC Players Unite!"
    });
  }
  render() {
    return (
      
        
        {this.state.text}
      
    );
  }
};

Здесь есть состояние, которое отслеживает текст. Есть метод, который позволяет установить текст на PS5 и ПК -игроки объединяются! . Хотя метод не работал, потому что он использовал это ключевое слово, которое не определен. Я исправил это, связывая это с методом Handleclick () в конструкторе компонента.
После этого я добавил обработчик щелчка в метод элемента кнопки.
После завершения вы сможете нажать кнопку и увидеть PS5 и ПК -игроки объединяются!

Использование состояния для переключения элемента

Вероятно, бывают случаи, когда вам, возможно, нужно знать предыдущее состояние при обновлении состояния. Поскольку в React они несколько вызовов SetState () в одном обновлении. Это означает, что вы не можете полагаться на предыдущее значение этого. State или This.props при расчете следующего значения. Так что ваш код должен выглядеть так.

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

Здесь я прошел функцию SetState, которая позволяет вам получить доступ к состоянию и реквизиту. Использование функции с SetState гарантирует, что вы работаете с наиболее современными значениями состояния и реквизита.
Или, может быть, вы хотите использовать форму без реквизита и просто заявить.

this.setState(state => ({
  counter: state.counter + 1
}));

Freecodecamp предоставил нам MyComponent, который имеет свойство видимости, которое инициализируется FALSE. Метод рендеринга возвращает одно представление, если значение видимости верно, и другое представление, если оно является ложным.
Но нет возможности обновить свойство видимости в состоянии компонента. Значение должно переключаться взад и вперед между истинными и ложными. Нам нужна функция TopPass для SetState, чтобы определить этот метод, чтобы состояние видимости переключалось до противоположного значения при вызове метода.

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

    this.toggleVisibility = this.toggleVisibility.bind(this)



  }
  toggleVisibility() {
  this.setState(state => {
    if (state.visibility === true) {
      return { visibility: false } 
    } else {
      return { visibility: true }
    }

  })
  }

  render() {
    if (this.state.visibility) {
      return (
        
          
          Now you see me!
        
      );
    } else {
      return (
        
          
        
      );
    }
  }
}

Теперь, если вы нажмете кнопку, вы увидите условное рендеринг компонента на основе его состояния.

Написание простого счетчика

Чем больше мы узнаем, тем больше мы можем разработать более сложный компонент состояния, объединив концепции, которые мы закончили. Который включает в себя методы состояния и написания, которые устанавливают состояние и назначают обработчики кликов для запуска этих методов.
Теперь Freecodecamp хочет, чтобы мы написали метод, чтобы значение счетчика увеличивалось или уменьшается на 1, когда нажата на правильную кнопку. Он также хочет, чтобы мы написали метод сброса (), поэтому, когда пользователь нажимает на него, он сбрасывает счет до 0.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    // Change code below this line

    // Change code above this line
  }
  // Change code below this line

  // Change code above this line
  render() {
    return (
      
        
        
        
        Current Count: {this.state.count}
      
    );
  }
};

*Отвечать:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = this.increment.bind(this)
    this.decrement = this.decrement.bind(this)
    this.reset = this.reset.bind(this)


  }

  increment() {
    this.setState(state => ({
      count: state.count + 1
    }))
  }

  decrement() {
    this.setState(state => ({
      count: state.count - 1
    }))
  }

  reset() {
    this.setState(state => ({
     count: 0
    }))
  }

  render() {
    return (
      
        
        
        
        Current Count: {this.state.count}
      
    );
  }
};

Ларсон, Q., 2019. Библиотеки развития фронта. [онлайн] freecodecamp.org. Доступно по адресу: https://www.freecodecamp.org/learn/front-end-development-libraries/react

Оригинал: «https://dev.to/rthefounding/react-state-topicsnotes-42d9»

{this.state.name}

Состояние рендеринга в пользовательском интерфейсе

{this.state.name}

{name}

Примечания:

Установить состояние с этим. SetState

{this.state.name}

Связывать «это» с методом класса

{this.state.text}

Использование состояния для переключения элемента

Now you see me!

Написание простого счетчика

Current Count: {this.state.count}

Current Count: {this.state.count}

Читайте ещё по теме: