React Native的state使用详解
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native的state使用详解相关的知识,希望对你有一定的参考价值。
什么是State
props是不可改变,只读的。为了实现交互,就需要用到组件的state。我们将组件看为状态机,UI是各种各样的状态,并在各种各样的状态之间可以切换,只需要改变组件的state,就会重新渲染UI。
state是组件私有的,是没有办法通过其他组件传递过来的。
state的两种声明方式
import React from ‘react‘;
import {Text, View} from "react-native";
export default class StateTest extends React.Component {
/**
* 方式二
* @type {{size: number}}
*/
state = {
size: 100,
};
constructor() {
super();
/**
* 方式一
*/
// this.state = {
// size: 80,
// };
}
render() {
return (
<View>
<Text style={{fontSize: 20, color: ‘red‘}}>{this.state.size}</Text>
</View>
);
}
}
设置State
this.setState({
size: this.state.size - 10
})
以上是关于React Native的state使用详解的主要内容,如果未能解决你的问题,请参考以下文章
Flow(React Native)给我使用“this.state”的错误
如何在 React-Native 组件的警报中显示 state
关于 React Native App 中的 this.state 函数