前言：在安卓中我们可以通过自定义一个属性例如一个Boolean来标识是否刷新数据更新视图，但是在RN中props一经指定在生命周期类是不会再发生变化的，所以我们要达到和安卓一样的效果是不能通过props来做的，RN专门为我们提供了state这个字段
state： 是RN 专门用来标识是否重新渲染，通过属性的值来更新数据，React 内部会监听 state 的变化，一旦发生变化就会主动触发组件的 render() 方法来更新 Dom 结构，另外state是组件私有的，是没有办法通过其他组件传递过来的。
state的使用：
- 1、构造器外面
export default class StateTest extends Component {
//方式一
state = {
num: 0
}
// 构造
constructor(props) {
super(props);
// 每1000毫秒对num+1
setInterval(() => {
this.setState(previousState => {
return {num: ++this.state.num};
});
}, 1000);
}
render() {
var msg = this.state.num
return (
<Text size={32} color= {'red'}>{msg}</Text>
);
}
}
- 2、方式二构造器内（建议这样）
// 构造
constructor(props) {
super(props);
//方式二
this.state = {
num: 0
}
// 每1000毫秒对num+1
setInterval(() => {
this.setState(previousState => {
return {num: ++this.state.num};
});
}, 1000);
}
// 每1000毫秒对num+1
setInterval(() => {
//这种方式修改state是无效的，必须调用setState（）才能起作用
//this.state= ++this.state.num;
//this.setState(previousState => {
// return {num: ++this.state.num};
//});
//也可以这样写，这样写也就可以直接拿到props，有可能我们的业务需要用到props
this.setState((prevState, props) =>{
return {num: ++this.state.num};
} );
}, 1000);
prevState 是一个对之前状态（previous state）的引用，我们是不能直接修改这个参数的值，要想修改 state 的值，我们应该根据 prevState 和 props 参数来创建一个新的 JavaScript 对象,例如：return {num: ++this.state.num};。
既然 我们要创建一个JavaScript对象，上面我们是通过一个函数来创建的，当然我们可以直接传入一个对象，而不是一个函数，例如：
this.setState({num: 18});
但是我们一般应该不会这样写，毕竟我们在改变视图的时候肯定会有一些逻辑需要处理
特别提示：作为一个安卓开发，我们第一反应要改变state，可能是以以下方式来处理的
// 每1000毫秒对num+1
setInterval(() => {
//这种方式修改state是无效的，必须调用setState（）才能起作用
this.state= ++this.state.num;
//this.setState(previousState => {
// return {num: ++this.state.num};
//});
}, 1000);
说明：setState() 方法会把对组件 state 的改变加入到队列中，并且告诉 React 这个组件及其子组件需要重新渲染,React 并不能保证 setState() 一被调用 state 就能更新。所以，如果在调用 setState() 之后，马上就读取 this.state 的值的话，可能会出现误差,所以setState(updater, callback) 方法的第二个参数 callback 是一个可选参数，暂时未找到使用实例。
网友评论