
Содержание статьи
Это часть моей серии «React для начинающих», посвященная знакомству с React, его основным функциям и лучшим практикам, которых следует придерживаться. Будет больше статей!
< Попередній | Далі >
Если вы знаете, как отобразить компонент React, это прекрасно. Теперь давайте предоставим нашим компонентам свои данные.
Отказ от ответственности: Эта статья посвящена встроенному состоянию React. Обратите внимание, что состояние компонента и Redux несовместимы, поскольку их назначение различно.
На мой взгляд, состояние компонента является специфическим для области компонента (для заполнения формы). Кроме того, состояние Redux помогает делиться одним и тем же состоянием между многими компонентами.
Нужно ли мне государство?
Чтобы изучить состояния, давайте создадим a Question
компонент. Он отобразит вопрос да/нет и спросит ответ.
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 <p>You already answered this question ({this.state.answer ? 'yes' : 'no'})</p>
}
return (
<p>
<span>{this.props.label}</span>
<label><input type="radio" name="answer" value="true" onChange={this.answerQuestion}/>Yes</label>
<label><input type="radio" name="answer" value="false" onChange={this.answerQuestion}/>No</label>
</p>
);
}
}
наш Question
компонент содержит только три функции:
constructor
для инициализации (реквизиты и состояние),answerQuestion
это обратный вызов, который запускается, когда пользователь отвечаетrender
что вы, наверное, уже знаете, выводит шаблон компонента.
Этот компонент имеет два разных состояния. На вопрос нет ответа или вопрос имеет ответ.

Реквизиты используются только для метки вопроса, а кроме того, для государства цель гораздо интереснее.
Состояние – это компонент памяти, который запоминает, есть ли ответ на вопросы. Если да, то он тоже знает ответ.
Превратите состояние в пропс
Использовать состояние в компоненте легко. Вы должны инициализировать состояние и вызвать setState
функционировать, когда вы хотите обновить содержимое.
Представьте себя компонентом. Если состояние изменится, вашей реакцией будет проверить, нужно ли вам обновлять свой дисплей.
Вот как это работает. Реагировать на звонки shouldComponentUpdate
перед звонком render
(см. документацию). Эта вторая функция создаст следующее состояние Virtual 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 => <Question label={question}/>)
}
Компоненты получают пропсы других компонентов. Если эти свойства изменятся, компонент будет обновлен.
На самом деле вы уже знаете, как это работает, но возьмем пример a Survey
содержит некоторые Question
.
The Survey
содержит метки вопросов в своем состоянии и передает их Question
как собственность.
Когда Survey
обновляет свое состояние (звонки setState
), то render
триггеры функций. Если да, он посылает запрос для Question
визуализация (подробности в React doc).
Принять шаблон контейнера
Отделение просмотра от остального кода всегда вызывало большую заботу среди разработчиков. Вот почему большинство шаблонов проектирования, используемых во фреймворках, произошли от шаблона MVC.
Если вы используете React из Redux, вы уже знаете контейнер узор. Фактически это встроенная функция Redux через функцию подключения.
/*
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);
Пора разделить Question
компонент на две составляющие.
Question
будет отвечать за рендеринг пропсов. Такой компонент называется функциональным, презентационным или немым компонентом.
QuestionContainer
будет заниматься государственным управлением.
const Question = (props) =>
<p>
<span>{props.label}</span>
<label><input type="radio" name="answer" value="true" onChange={props.answerQuestion}/>Yes</label>
<label><input type="radio" name="answer" value="false" onChange={props.answerQuestion}/>No</label>
</p>
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 <p>You already answered this question (props.answer ? 'yes' : 'no'})</p>
}
// Here is the trick
return <Question label={this.props.label} answerQuestion={this.answerQuestion}/>
}
}
Для сравнения с шаблоном проектирования MVC, Question
это Просмотреть и QuestionContainer
это Контроллер.
Другие необходимые компоненты Question
теперь буду использовать QuestionContainer
вместо Question
. Это рассуждение полностью принято в обществе.
Будьте осторожны с антишаблоном setState
Используя это 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 });
Подводя итог, не используйте this.state
и this.props
внутри setState
звонки.
Эти переменные могут иметь не те значения, которые вы ожидаете. React оптимизирует изменения состояния. Он сжимает несколько изменений в одну для проблем производительности (до оптимизации Virtual 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
. Предоставьте функцию как единственный параметр и используйте prop
и state
параметры (см. документацию).
Полный компонент опроса
В этой статье мы рассмотрели основные использования состояния в React. Вы можете найти полный код для Survey
компонент в следующем Codepen.
Это все было о государствах. Вы сталкивались с компонентами, атрибутами и состояниями, и теперь у вас есть набор для начинающих играть с React.
Надеюсь, вам понравилось прочесть эту статью и вы узнали много нового!
Если вы нашли эту статью полезной, нажмите на ? кнопку несколько раз, чтобы другие нашли статью и выразили вашу поддержку! ?
Не забудьте подписаться на меня, чтобы получать уведомления о моих будущих статьях ?
Это часть моей серии «React для начинающих», посвященная знакомству с React, его основным функциям и лучшим практикам, которых следует придерживаться.
< Попередній | Далі >