3.0 KiB
title | localeTitle |
---|---|
Component State | Состояние компонента |
Состояние компонента
В компонентах Class
существует способ хранения и управления состоянием, встроенным в React Native.
class App extends Component {
constructor () {
super();
this.state = {
counter: 0
};
}
incrementCount () {
this.setState({
counter: this.state.counter + 1
});
}
decrementCount () {
this.setState({
counter: this.state.counter - 1
});
}
render () {
return (
<View>
<Text>Count: {this.state.counter}</Text>
<Button onPress={this.decrementCount.bind(this)}>-</Button>
<Button onPress={this.incrementCount.bind(this)}>+</Button>
</View>
);
}
}
Состояние похоже на реквизит, но оно является частным и полностью контролируется компонентом. Здесь метод constructor()
вызывает конструктор родительского класса с super();
- Component
является родительским классом App
потому что мы используем ключевое слово extends
. Метод constructor()
также инициализирует объект состояния компонента:
this.state = {
counter: 0
};
Состояние может отображаться внутри компонента:
{this.state.counter}
Или обновляется по телефону:
this.setState({});
Примечание. Помимо своего первоначального создания в методе constructor()
вашего компонента, вы никогда не должны напрямую изменять состояние компонента с помощью this.state =
. Вы должны использовать this.setState
как видно из приведенных выше функций incrementCount
и decrementCount
.
onPress
увеличивается и уменьшается, вызывая функции, переданные обработчикам onPress
точно так же, как если бы вы вызвали обработчик кликов из JavaScript в Интернете.
ASIDE: В первом примере <Button>
- это настраиваемый компонент; это комбинация <TouchableOpacity>
и <Text>
от React Native API:
const Button = ({ onPress, children, buttonProps, textProps }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
<Text style={[textStyle, textProps]}>
{children}
</Text>
</TouchableOpacity>
);
};