Рубрики
Без рубрики

Как привести реактивность в реагирование с состояниями

Это является частью моей «реагирования на новичков» серии «Начинающие» при введении реагирования, его основных функций и лучших практик для последующей деятельности. Допускаются больше статей! <Предыдущая | Далее> Если вы знаете, как отобразить React Component – это здорово. Теперь давайте дадим нашим компонентам свои данные. Отказ от ответственности:

Автор оригинала: FreeCodeCamp Community Member.

Если вы знаете Как отобразить React Component – Замечательно. Теперь давайте дадим нашим компонентам свои данные.

Отказ от ответственности: В этой статье ориентирована на встроенное государство React. Обратите внимание, что состояние компонента и Redux не являются несовместимыми, поскольку их цель отличается.

На мой взгляд, состояние компонента специфично для объема компонентов (для завершения формы). Кроме того, государство redux помогает совместно использовать одно и то же состояние среди многих компонентов.

Мне нужно государство?

Изучить государства, давайте создадим Вопрос:| составная часть. Это отобразит вопрос да/нет и попросить ответа. 

class Question extends React.Component {
  constructor(props) { // Init props and state
      super(props);
      this.state = { answered: false };
      this.answerQuestion = this.answerQuestion.bind(this);
  }
  answerQuestion({target}){ // State update (user answers to the question)
      let answer = target.value === 'true' ? true : false;
      this.setState({ answered: true, answer });
  }
  render() { // Component template in JSX
    if(this.state.answered) {
      return 
You already answered this question ({this.state.answer ? 'yes' : 'no'})

    }
    return (
      

        {this.props.label}
        
        
      

    );
  }
}

Наше Вопрос:| Компонент содержит только три функции:

  • Конструктор Для инициализации (реквизит и штата),
  • Ответственность вызывается обратный вызов, когда пользователь отвечает
  • оказывать Что вы, вероятно, уже знаете – он выводит шаблон компонента.

Этот компонент имеет два отдельных состояния. Вопрос не отвечен, или вопрос имеет ответ.

Реквисы используются только для этикетки вопросов, а кроме того, Государство Цель гораздо интереснее.

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

Преобразовать состояние в реквизит

Использование состояния в компоненте легко. Вы должны инициализировать состояние и звонить SetState Функция всякий раз, когда вы хотите обновить его контент.

Представьте себе компонент. Если ваше состояние изменилось, ваша реакция будет проверять, если вам нужно обновить ваш дисплей.

Вот как это работает. Реагирование звонков должен быть необходим Перед звонком оказывать ( Посмотреть документацию ). Эта вторая функция будет генерировать следующее виртуальное состояние DOM ( моя последняя статья Об этом рассказывает).

class Survey extends React.Component { 
  // Somewhere in constructor function
  this.state = { 
    questions: [ 'Do you like bananas ?', 'Are you a developer ?' ]
  };
  // Somewhere in render function 
  this.state.questions.map(question => )
}

Компоненты получают реквизиты от других компонентов. Если эти реквизиты меняются, то компонент будет обновляться.

На самом деле, вы уже знаете, как это работает – но давайте возьмем пример Опрос содержащий некоторые Вопрос:| Отказ

Опрос Содержит метки вопросов в своем штате и дает ему Вопрос:| как недвижимость.

Когда Опрос Обновляет его состояние (звонки SetState ), оказывать Функция триггеры. Если это так, он отправляет запрос на Вопрос:| рендеринг (детали в Rect Doc ).

Принять контейнер

Развязка вида и остальная часть кода всегда была серьезной проблемой среди разработчиков. Вот почему большинство рисунков дизайна, используемых в каркасах, простираются от модели MVC.

Если вы используете реагирование с redux, вы уже знаете Контейнер шаблон. На самом деле, это встроенная функция Redux через функцию Connect.

/* 
  Question and QuestionContainer are both regular React components
  QuestionContainer renders a single Question component 
  and provides access to redux stuff through props
*/
const QuestionContainer = 
  connect(mapStateToProps, mapDispatchToProps)(Question);

Пришло время разделить Вопрос:| компонент на два компонента.

Вопрос:| будет нести ответственность за рендеринг реквизит. Этот вид компонента называется либо функциональным, презентационным, либо глупым компонентом.

Questioncontainer будет иметь дело с государственным управлением.

const Question = (props) => 
  

    {props.label}
    
    
  

        
class QuestionContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { answered: false };
    this.answerQuestion = this.answerQuestion.bind(this);
  }
  answerQuestion({target}){
    let answer = target.value === 'true' ? true : false;
    this.setState({ answered: true, answer });
  }
  render() {
    if(props.answered) {
      return 
You already answered this question (props.answer ? 'yes' : 'no'})

    }
    // Here is the trick
    return 
  }
}

Для сравнения с шаблоном дизайна MVC Вопрос:| это Вид и Questioncontainer это Контроллер Отказ

Другие компоненты, которые нуждаются в Вопрос:| теперь будет использовать Questioncontainer вместо Вопрос:| Отказ Это рассмотрение вполне принято в сообществе.

Будьте осторожны с SetState Anti-Pattern

Используя это SetState довольно просто.

Передайте следующее состояние как первый и только параметр. Он будет обновлять текущие свойства состояния с новыми пропущенными значениями.

// Very bad pratice: do not use this.state and this.props in setState !
this.setState({ answered: !this.state.answered, answer });

// With quite big states: the tempatation becomes bigger 
// Here keep the current state and add answer property
this.setState({ ...this.state, answer });

Подводя итоги, не используйте Это и Это .props внутри SetState звонки.

Эти переменные могут не иметь ожидаемых значений. Реагистрирование оптимизирует изменения состояния. Это сквоши, умножем изменения в один для проблем с производительностью (до виртуальных оптимизаций DOM).

// Note the () notation around the object which makes the JS engine
// evaluate as an expression and not as the arrow function block
this.setState((prevState, props) 
              => ({ ...prevState, answer}));

Вы должны предпочесть другую форму SetState Отказ Обеспечить функцию как единственный параметр и использовать опора и Государство Параметры ( Смотрите документацию ).

Полный компонент обследования

В этой статье мы охватывали основные государственные употребления в реакции. Вы можете найти полный код для Опрос Компонент в следующем кодепене.

Это было все о штатах. Вы столкнулись с компонентами, реквизитами и состояниями, и теперь у вас есть начинающий комплект для игры с реагированием.

Я надеюсь, что вам понравилось читать эту статью и узнал много вещей!

Если вы нашли эту статью полезную, пожалуйста, нажмите на ? Кнопка несколько раз, чтобы сделать других найти статью и показать вашу поддержку! ?

Не забудьте следовать за мной, чтобы получить уведомление о моих предстоящих статьях ?

Проверьте мои другие статьи

➥ JavaScript

➥ Советы и трюки

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