目录
- 1.
state
属性- 1.1
state
属性的介绍 - 1.2
state
的使用
- 1.1
- 2.
setState()
方法- 2.1 第一个参数:
updater
函数 - 2.2 第二个参数:
callback
- 2.1 第一个参数:
- 3.正确操作 state
- 3.1 不要使用
this.state
来直接修改state
- 3.2 状态更新可能是异步的
- 3.3 状态更新是一个合并的过程
- 3.1 不要使用
- 4.单向数据流
- 5.完整示例代码
state
属性是 React 组件用来更新数据的核心特性,也是我们平时见得最多的属性之一,那么你对 state
又了解多少呢?
1. state
属性
1.1 state
属性的介绍
我们使用两种数据来控制一个组件:props
和 state
。props
是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用 state
。
state
属性主要用来存储组件自身需要的数据,是组件自己私有的,我们一般通过修改 state
属性的值来更新数据,React 内部会监听 state
的变化,一旦发生变化就会主动触发组件的 render()
方法来更新 Dom 结构。
state
应该是一个 JavaScript 对象。
1.2 state
的使用
一般来说,你需要在 constructor()
方法中初始化 state
(这是ES6的写法,ES5 中一般在 getInitialState()
方法中来初始化 state
),然后在需要修改时调用 setState()
方法。
不要使用 this.state
来修改 state
属性值,应该调用 setState()
方法,this.state
是不可变的。
2. setState()
方法
setState()
的完整表达式
setState(updater, [callback])
setState()
方法会把对组件 state 的改变加入到队列中,并且告诉 React 这个组件及其子组件需要重新渲染。
2.1 第一个参数:updater
函数
setState(updater, callback)
方法的第一个参数是一个固定格式的 updater
函数:
(prevState, props) => stateChange
prevState
是一个对之前状态(previous state)的引用,我们是不能直接修改这个参数的值,要想修改 state
的值,我们应该根据 prevState
和 props
参数来创建一个新的 JavaScript 对象。
例如:
this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});
你也可以传一个对象而不是函数,来作为setState(updater, callback)
方法的第一个参数,React 会将该参数 merge 到 state 中。
例如:
this.setState({quantity: 2});
2.2 第二个参数:callback
setState(updater, callback)
方法的第二个参数 callback
是一个可选参数。
为了更好的性能表现,React 并不能保证 setState()
一被调用 state 就能更新。所以,如果在调用 setState()
之后,马上就读取 this.state
的值的话,可能会出现误差。
因此,这种情况下,推荐使用 componentDidUpdate
或者 setState(updater, callback)
方法的 callback
来获取最新的状态。React 官方更推荐使用 componentDidUpdate()
,而不是 callback
来监听 update 事件(注: 除非 shouldComponentUpdate()
方法返回 false
,setState()
将永远都会引发重新渲染)。
3. 正确操作 state
3.1 不要使用 this.state
来直接修改 state
记住,
this.state
是不可变的。
不要使用 this.state
来修改 state
属性值:
// Wrong
this.state.comment = 'Hello';
应该调用 setState()
方法:
// Correct
this.setState({comment: 'Hello'});
3.2 状态更新可能是异步的
考虑到性能问题,如果在同一个周期内,调用了多次,React 可能会将多个 setState()
方法的调用批量合成一次更新。比如,你在一个周期内,对一个数值进行多次累加,就会出现类似于下面的这种情况:
Object.assign(
previousState,
{quantity: state.quantity + 1},
{quantity: state.quantity + 1},
...
)
这也就意味着,后面的调用会覆盖掉上一次调用后的修改的 state 值,因此 quantity 只累加了 1 次。
考虑到 this.props
和this.state
可能是异步更新的,所以,每次调用 setState()
方法时,最好不要依赖于 this.props
和this.state
来计算最新的 state
。
总之,如果后面的状态依赖于之前的状态,建议使用 updater
函数:
// Correct
this.setState((prevState, props) => {
return {quantity: prevState.quantity + 1};
});
上面用的是 箭头函数 的形式,其实用普通的函数也是一样的效果:
// Correct
this.setState(function(prevState, props) {
return {
quantity: prevState.quantity + 1;
};
});
3.3 状态更新是一个合并的过程
当你调用 setState()
方法时,React 会将将你当前所提供的对象合并到当前的状态中。
例如:
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
componentDidMount() {
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
在上面的例子中, state 的更新只是替换了 comments
,posts
是不会受到任何影响的。
4.单向数据流
父组件和子组件之间不能通过 state 来交互,父组件只能将自己的 state 值传给子组件的 props。这种数据传递的方式通常被称为 “自顶向下(top-down)”或者“单向(unidirectional)”数据流。
任何 state 都是由一个特定的组件所拥有的,任何由 state 驱动的数据或者 UI 只会影响到该组件的子组件。
如果你将组件树想象成一个 props 瀑布,那么每个组件的状态就像是那个组件水源上的附属品,但是也是向下流动的。
5. 完整示例代码
'use strict';
import React, { Component, } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableOpacity,
} from 'react-native';
export default class StateDemo extends Component {
render() {
return ;
}
}
class Container extends Component {
constructor() {
super();
// 设置初始状态
this.state = {
showText: true,
};
}
render() {
// 根据状态决定展示什么文字
var text = (this.state.showText == true) ? 'Hello' : "";
var buttonTitle = (this.state.showText == true) ? 'Hide' : "Show";
return (
{text}
{
// 更新状态
this.setState(
previousState => {
return { showText: !previousState.showText };
}
);
}}>
{buttonTitle}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow',
alignItems: 'center',
},
text: {
marginTop: 200,
fontSize: 30,
textAlign: 'center',
},
buttonTitle: {
width: 70,
marginTop: 10,
fontSize: 20,
textAlign: 'center',
backgroundColor: 'green',
},
});
延伸阅读
- React API Reference: React.Component
- React API Reference: State and Lifecycle
- React Native 官方文档:State
- 《React Native 入门与实战》